0
Node.js - HTML Button funktioniert nicht
Hallo zusammen,
ich bin gerade dabei mir mit Node.JS eine kleine "MovieDB" Webapp zu bauen, was im Grunde auch soweit funktioniert.
Die App startet und zeigt mir auch keine Fehler.
Über den Button "Add New" kann ich auch erfolgreich neue Werte in die DB schreiben und diese werden auch korrekt angezeigt.
Jedoch bei den Buttons "Delete" und "Edit" passiert gar nix wenn ich auf diese klicke
.
Da ich noch Neuling in diesem Bereich bin hoffe Ihr könnt mir helfen.
Scheinbar habe ich irgendwo noch einen Denkfehler.
Ich habe bei den Buttons auch schon als Flag das "data-target" mit angegeben wie ich es bei "Add New" habe, aber es funktioniert trotzdem nicht.
Website:
app.js:
Vielen Dank für eure Hilfe.
Gruß
ich bin gerade dabei mir mit Node.JS eine kleine "MovieDB" Webapp zu bauen, was im Grunde auch soweit funktioniert.
Die App startet und zeigt mir auch keine Fehler.
Über den Button "Add New" kann ich auch erfolgreich neue Werte in die DB schreiben und diese werden auch korrekt angezeigt.
Jedoch bei den Buttons "Delete" und "Edit" passiert gar nix wenn ich auf diese klicke
.Da ich noch Neuling in diesem Bereich bin hoffe Ihr könnt mir helfen.
Scheinbar habe ich irgendwo noch einen Denkfehler
.Ich habe bei den Buttons auch schon als Flag das "data-target" mit angegeben wie ich es bei "Add New" habe, aber es funktioniert trotzdem nicht
.Website:
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Movie Database with Node.js and Mysql</title>
<link href="/assets/css/bootstrap.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
<h2>Movie List</h2>
<button class="btn btn-success" data-toggle="modal" data-target="#myModalAdd">Add New</button>
<table class="table table-striped" id="mytable">
<thead>
<tr>
<th>Movie ID</th>
<th>Movie Titel</th>
<th>Format</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{{#each results}}
<tr>
<td>{{ movie_id }}</td>
<td>{{ movie_titel }}</td>
<td>{{ movie_format }}</td>
<td>
<a href="javascript:void(0);" class="btn btn-sm btn-info edit" data-id="{{ movie_id }}" data-movie_titel="{{ movie_titel }}" data-movie_format="{{ movie_format }}">Edit</a>
<a href="javascript:void(0);" class="btn btn-sm btn-danger delete" data-id="{{ movie_id }}">Delete</a>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<!-- Modal Add movie-->
<form action="/save" method="post">
<div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add New movie</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" name="movie_titel" class="form-control" placeholder="movie Name" required>
</div>
<div class="form-group">
<input type="text" name="movie_format" class="form-control" placeholder="format" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</form>
<!-- Modal Update movie-->
<form action="/update" method="post">
<div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit movie</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" name="movie_titel" class="form-control movie_titel" placeholder="movie Name" required>
</div>
<div class="form-group">
<input type="text" name="movie_format" class="form-control format" placeholder="format" required>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="id" class="movie_id">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
</form>
<!-- Modal Delete movie-->
<form id="add-row-form" action="/delete" method="post">
<div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Delete movie</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<strong>Are you sure to delete this data?</strong>
</div>
<div class="modal-footer">
<input type="hidden" name="movie_id" class="form-control movie_id2" required>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Delete</button>
</div>
</div>
</div>
</div>
</form>
<script src="/assets/js/jquery.js"></script>
<script src="/assets/js/bootstrap.js"></script>
<script>
$(document).ready(function(){
//showing data to edit modal $('#mytable').on('click','.edit',function(){
var movie_id = $(this).data('movie_id');
var movie_titel = $(this).data('movie_titel');
var movie_format = $(this).data('movie_format');
$('#EditModal').modal('show');
$('.movie_titel').val(movie_titel);
$('.movie_format').val(movie_format);
$('.movie_id').val(movie_id);
});
//showing delete record modal
$('#mytable').on('click','.delete',function(){
var movie_id = $(this).data('id');
$('#DeleteModal').modal('show');
$('.movie_id2').val(movie_id);
});
});
</script>
</body>
</html>app.js:
const path = require('path');
const express = require('express');
const hbs = require('hbs');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
//DB Settings
const conn = mysql.createConnection({
host: 'localhost',
user: 'myvideodb',
password: 'xxx',
database: 'myvideodb'
});
//DB Connect
conn.connect((err) => {
if(err) throw err;
console.log('MySQL Connected...')
});
//set views file
app.set('views', path.join(__dirname, 'views'));
//set view engine
app.set('view engine', 'hbs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false}));
//set public folder for static files
app.use('/assets', express.static(__dirname + '/public'));
//route for homepage
app.get('/',(req, res) => {
let sql = "select * from movie";
let query = conn.query(sql, (err, results) => {
if(err) throw err;
res.render('movie_view', {
results: results
});
});
});
//route for insert data
app.post('/save',(req, res) => {
let data = {movie_titel: req.body.movie_titel, movie_format: req.body.movie_format};
let sql = "INSERT INTO movie SET ?";
let query = conn.query(sql, data,(err, results) => {
if(err) throw err;
res.redirect('/');
});
});
//route for update data
app.post('/update',(req, res) => {
let sql = "UPDATE movie SET movie_titel='"+req.body.movie_titel+"', movie_format='"+req.body.movie_format+"' WHERE movie_id="+req.body.movie_id;
let query = conn.query(sql, (err, results) => {
if(err) throw err;
res.redirect('/');
});
});
//route for delete data
app.post('/delete',(req, res) => {
let sql = "DELETE FROM movie WHERE movie_id="+req.body.movie_id+"";
let query = conn.query(sql, (err, results) => {
if(err) throw err;
res.redirect('/');
});
});
//server listening
app.listen(5001, () => {
console.log('Server is running at port 5001');
});Vielen Dank für eure Hilfe.
Gruß
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 570119
Url: https://administrator.de/contentid/570119
Ausgedruckt am: 22.11.2024 um 07:11 Uhr
