badfsaadkl
May 07, 2020
view2183
view0
0
Goto Top

Node.js - HTML Button funktioniert nicht

GermanQuestionHTMLDevelopment
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 face-sad.

Da ich noch Neuling in diesem Bereich bin hoffe Ihr könnt mir helfen.
Scheinbar habe ich irgendwo noch einen Denkfehler face-sad.

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 face-sad.

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">&times;</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">&times;</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">&times;</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ß
unbenannt
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 570119

Url: https://administrator.de/contentid/570119

Printed on: April 24, 2024 at 18:04 o'clock

GermanQuestionHTMLDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 5 CommentsjstrickerWireguard VPN on UDM Pro behind Fritzbox - Handshake did not completejstricker - 3 Comments