PUT and Delete Front end

Adil Ali
Adil Ali used Ask the Experts™
on
Put-ui-front-end.png

Above I have a screen shot of my PUT method and when ever I execute it I get no response from the network tab and I have a additional modal that pops up behind when ever I click update. Below I will show you my front end and also back end in node js.

<html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
    <link href="mystyle.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="mycrud.js"></script>
    <script>
    $.ajax({
      method:"GET",
      url: "http://localhost:3000/movielist",
      dataType: "json",
      success: function (response) {
        $.each(response, function(i, movie) {
        const rowText = "<tr>" +
            "<td>" + movie.idmovielist + "</td>" +
            "<td>" + movie.name + "</td>" +
            "<td>" + movie.thumbnail_path + "</td>" +
            "<td>" + movie.description + "</td>" +
            "<td>" + movie.year_released + "</td>" +
            "<td>" + movie.language_released + "</td>" +
            "<td>" + "<button button id = \"deleteMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Delete</button>" + "</td>" +
            "<td>" + "<button button id = \"editMovie\" type=\"button\"  class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Edit</button>" + "</td>";
          $("#movies").append(rowText);
        });
      }
    });
    </script>
    </head>
    <body>
    <title>My Movies</title>
    <header>
        <h1>Movies</h1>
    </header>
    <div class="modal fade" id="exampleModal" 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">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <form id="newForm">
                        <div class="form-group row">
                            <label for="idmovielist" class="col-sm-2 col-form-label">idmovielist</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="intNum" placeholder="idmovielist">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="name" class="col-sm-2 col-form-label">name</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="name" placeholder="name">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="thumnail_path" class="col-sm-2 col-form-label">thumnail_path</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="thumnail_path" placeholder="thumnail_path">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="description" class="col-sm-2 col-form-label">description</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="description" placeholder="description">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="year_released" class="col-sm-2 col-form-label">year_released</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="year_released" placeholder="year_released">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="language_released" class="col-sm-2 col-form-label">language_released</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="language_released"
                                       placeholder="language_released">
                            </div>
                        </div>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button id="movieAdded" type="button" class="btn btn-primary" data-toggle="modal"
                                data-target=#exampleModal>Add
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel2">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="updateForm">
                        <div class="form-group row">
                            <div class="col-sm-10">
                                <input type="hidden" class="form-control" id="movieId">
                            </div>
                        </div>

                        <label for="idmovielist" class="col-sm-2 col-form-label">idmovielist</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="intNum" placeholder="idmovielist">
                        </div>
                        <div class="form-group row">
                            <label for="name" class="col-sm-2 col-form-label">name</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="name" placeholder="name">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="thumnail_path" class="col-sm-2 col-form-label">thumnail_path</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="thumnail_path" placeholder="thumnail_path">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="description" class="col-sm-2 col-form-label">description</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="description" placeholder="description">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="year_released" class="col-sm-2 col-form-label">year_released</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="year_released" placeholder="year_released">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="language_released" class="col-sm-2 col-form-label">language_released</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="language_released"
                                       placeholder="language_released">
                            </div>

                        </div>
                    </form>

                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button id="updateMovie" type="button" class="btn btn-primary" data-toggle="modal"
                                data-target=#exampleModal>Update
                        </button>
                </div>
            </div>
        </div>
    </div>
    <button id="movieAdded" type="button" class="btn btn-primary" data-toggle="modal" data-target=#exampleModal>Add</button>
    <table class="table table-bordered table-hover" width="100%">
      </button>
        <thead style="background-color:#ddd;" class="table-borderless">
        <tr>
            <th>idmovielist</th>
            <th>name</th>
            <th>thumnail_path</th>
            <th>description</th>
            <th>year_released</th>
            <th>language_released</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody id="movies">
        </tbody>
    </table>
    </body>
    </html>

$(function() {
renderMovieList('movies');
  function renderMovieList(){
  $.ajax({
    method:"GET",
    url: "http://localhost:3000/movielist",
    dataType: "json",
    success: function (response) {
      $('#movies').empty();
    $.each(response, function(i, movie) {
    const rowText = "<tr>" +
      "<td>" + movie.idmovielist + "</td>" +
      "<td>" + movie.name + "</td>" +
      "<td>" + movie.thumbnail_path + "</td>" +
      "<td>" + movie.description + "</td>" +
      "<td>" + movie.year_released + "</td>" +
      "<td>" + movie.language_released + "</td>" +
      "<td>" + "<button button id = \"deleteMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Delete</button>" + "</td>" +
      "<td>" + "<button button id = \"editMovie\" type=\"button\"  class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Edit</button>" + "</td>";
      $("#movies").append(rowText);
    });
    }
  });
}
  $("#movieAdded").click(function(a) {
    a.preventDefault();

    let mydata = {
      idmovielist: $($("#newForm")[0].intNum).val(),
      name: $($("#newForm")[0].name).val(),
      thumnail_path: $($("#newForm")[0].thumnail_path).val(),
      description: $($("#newForm")[0].description).val(),
      year_released: $($("#newForm")[0].year_released).val(),
      language_released: $($("#newForm")[0].language_released).val(),
    }

    displayMovie(mydata);

    $("#newForm").trigger("reset");
    $("#newForm").toggle();
  });

  $("#updataMovie").on("click", function(a) {
    a.preventDefault();

    let data = {
      idmovielist: $($("#updateForm")[0].intNum).val(),
      name: $($("#updateForm")[0].name).val(),
      thumnail_path: $($("#updataForm")[0].thumnail_path).val(),
      description: $($("#updateForm")[0].description).val(),
      year_released: $($("#updateForm")[0].year_released).val(),
      language_released: $($("#updateForm")[0].language_released).val(),
    }

    putMovie($($("#updateForm")[0].movieId).val(), data);

    $("#updateForm").trigger("reset");
    $("#updateForm").toggle();
});

function getOneMovie(id) {
  $.ajax({
    url: "http://localhost:3000/movielist" + id,
    method: 'GET',
    dataType: 'json',
    success: function(data) {
      $($("#updateForm")[0].movieId).val(data._id);
      $($("#updateForm")[0].intNum).val(data.intNum);
      $($("#updateForm")[0].name).val(data.name);
      $($("#updateForm")[0].thumnail_path).val(data.thumnail_path);
      $($("#updateForm")[0].description).val(data.description);
      $($("#updateForm")[0].year_released).val(data.year_released);
      $($("#updateForm")[0].language_released).val(data.language_released);
      $("#updateForm").show();
    }
  });
}

function displayMovie(mydata) {
  $.ajax({
    method: "POST",
    url: "http://localhost:3000/movielist/addMovie",
    dataType: "json",
    data: mydata,
    success: function(data) {
       console.log(data);
      renderMovieList();
}
});
}

function loadButtons() {
              $(".editMovie").click(function (a) {
                  getOneMovie($($(this)[0]).data("movieId"));
                  a.preventDefault();
              });

              $(".deleteMovie").click(function (a) {
                  deleteMovie($($(this)[0]).data("movieId"));
                  a.preventDefault();
              });
          }

loadButtons();
function putMovie(data, id) {
  $.ajax({
    url: "http://localhost:3000/movielist/updateMovie/" + id,
    method: 'PUT',
    dataType: 'json',
    data: data,
    success: function(data) {
      console.log(data);
      getOneMovie();
    }
  });
}



function deleteMovie(id) {
  $.ajax({
    url: "http://localhost:3000/movielist/" + id,
    method: 'DELETE',
    dataType: 'json',
    success: function(data) {
      console.log(data);
    }
  });
}

});

Open in new window

Above is my front end code and below I will show you my back end

const express = require('express');
const app = express();
const mysql = require('mysql');
const bodyparser = require('body-parser');
app.use(bodyparser.urlencoded({ extended: true }));
app.use(bodyparser.json());
const mysqlConnection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'Adil@123',
  database: 'movies'

});
mysqlConnection.connect(err=>{
  if (err) {
    console.log('It was not successful \n Error:' + JSON.stringify(err,undefined,2));
  } else {
    console.log('Its a success');
  }
  });
 //  Collecting all the movies from the movielist
  app.get('/movielist',(req,res)=> {
    mysqlConnection.query("SELECT * FROM movielist", (err, rows,fields)=> {
      if (!err) {
        res.send(rows);
      } else {
        console.log(err);
      }
    });
  });
 // Finding a movie based on the `idmovielist` number
   app.get('/movielist',(req,res) => {
    mysqlConnection.query("SELECT * FROM movielist WHERE idmovielist = ?",[req.params.id],(err, rows,fields) =>{
    if (!err) {
      res.send(rows);
    } else {
    console.log(err);
    }
    });
  });

  // Delting a movie
   app.delete('/movielist/:id',(req,res) => {
    mysqlConnection.query("DELETE FROM movielist WHERE idmovielist = ?",[req.params.id],(err,rows,fields) =>{
      if (!err) {
        res.send("Movie is deleted");
      } else {
      console.log(err);
    }
    });
  });
  // Inserting a movie
  app.post('/movielist/addMovie',(req, res) => {
    //console.log("movielist/addMovie : ",req.body);
   mysqlConnection.query("INSERT INTO movielist (`idmovielist`,`name`,`thumnail_path`,`description`,`language_released`,`year_released`) VALUES ('"+req.body.idmovielist+"', '"+req.body.name+"','"+req.body.thumnail_path+"', '"+req.body.description+"', '"+req.body.year_released+"', '"+req.body.language_released+"')",
   (err,rows) => {
     if (!err) {
       res.send("Movie is added");
     } else {
       console.log(err);
     }
  });
});

app.put('/movielist/updateMovie/:id',(req,res) =>{
  const update = req.body;
  mysqlConnection.query("UPDATE movielist SET ? WHERE idmovielist = ?",[update], function (err, results) {
    if (!err) {
      res.send("Movie list is updated");
    } else {
      console.log(err);
    }
  });
});

// localhost:3000
app.listen(3000,() => {
  console.log('We got it running');
});
module.exports = app;

Open in new window


I also wanted to know how I can execute a delete as well for my front end
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Distinguished Expert 2017

Commented:
I think it is a scope problem...I mean that the second script must encapsulate into the first ajax callback success method..ie
JQuery script
$.ajax({
      method:"GET",
      url: "http://localhost:3000/movielist",
      dataType: "json",
      success: function (response) {
        $.each(response, function(i, movie) {
        const rowText = "<tr>" +
            "<td>" + movie.idmovielist + "</td>" +
            "<td>" + movie.name + "</td>" +
            "<td>" + movie.thumbnail_path + "</td>" +
            "<td>" + movie.description + "</td>" +
            "<td>" + movie.year_released + "</td>" +
            "<td>" + movie.language_released + "</td>" +
            "<td>" + "<button button id = \"deleteMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Delete</button>" + "</td>" +
            "<td>" + "<button button id = \"editMovie\" type=\"button\"  class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Edit</button>" + "</td>";
          $("#movies").append(rowText);
        });
        
        
  //Write inside here the second script get, ajax and post asynchronous functions
  
  $(function() {
renderMovieList('movies');
  function renderMovieList(){
  $.ajax({
    method:"GET",
    url: "http://localhost:3000/movielist",
    dataType: "json",
    success: function (response) {
      $('#movies').empty();
    $.each(response, function(i, movie) {
    const rowText = "<tr>" +
      "<td>" + movie.idmovielist + "</td>" +
      "<td>" + movie.name + "</td>" +
      "<td>" + movie.thumbnail_path + "</td>" +
      "<td>" + movie.description + "</td>" +
      "<td>" + movie.year_released + "</td>" +
      "<td>" + movie.language_released + "</td>" +
      "<td>" + "<button button id = \"deleteMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Delete</button>" + "</td>" +
      "<td>" + "<button button id = \"editMovie\" type=\"button\"  class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Edit</button>" + "</td>";
      $("#movies").append(rowText);
    });
    }
  });
}
  $("#movieAdded").click(function(a) {
    a.preventDefault();

    let mydata = {
      idmovielist: $($("#newForm")[0].intNum).val(),
      name: $($("#newForm")[0].name).val(),
      thumnail_path: $($("#newForm")[0].thumnail_path).val(),
      description: $($("#newForm")[0].description).val(),
      year_released: $($("#newForm")[0].year_released).val(),
      language_released: $($("#newForm")[0].language_released).val(),
    }

    displayMovie(mydata);

    $("#newForm").trigger("reset");
    $("#newForm").toggle();
  });

  $("#updataMovie").on("click", function(a) {
    a.preventDefault();

    let data = {
      idmovielist: $($("#updateForm")[0].intNum).val(),
      name: $($("#updateForm")[0].name).val(),
      thumnail_path: $($("#updataForm")[0].thumnail_path).val(),
      description: $($("#updateForm")[0].description).val(),
      year_released: $($("#updateForm")[0].year_released).val(),
      language_released: $($("#updateForm")[0].language_released).val(),
    }

    putMovie($($("#updateForm")[0].movieId).val(), data);

    $("#updateForm").trigger("reset");
    $("#updateForm").toggle();
});

function getOneMovie(id) {
  $.ajax({
    url: "http://localhost:3000/movielist" + id,
    method: 'GET',
    dataType: 'json',
    success: function(data) {
      $($("#updateForm")[0].movieId).val(data._id);
      $($("#updateForm")[0].intNum).val(data.intNum);
      $($("#updateForm")[0].name).val(data.name);
      $($("#updateForm")[0].thumnail_path).val(data.thumnail_path);
      $($("#updateForm")[0].description).val(data.description);
      $($("#updateForm")[0].year_released).val(data.year_released);
      $($("#updateForm")[0].language_released).val(data.language_released);
      $("#updateForm").show();
    }
  });
}

function displayMovie(mydata) {
  $.ajax({
    method: "POST",
    url: "http://localhost:3000/movielist/addMovie",
    dataType: "json",
    data: mydata,
    success: function(data) {
       console.log(data);
      renderMovieList();
}
});
}

function loadButtons() {
              $(".editMovie").click(function (a) {
                  getOneMovie($($(this)[0]).data("movieId"));
                  a.preventDefault();
              });

              $(".deleteMovie").click(function (a) {
                  deleteMovie($($(this)[0]).data("movieId"));
                  a.preventDefault();
              });
          }

loadButtons();
function putMovie(data, id) {
  $.ajax({
    url: "http://localhost:3000/movielist/updateMovie/" + id,
    method: 'PUT',
    dataType: 'json',
    data: data,
    success: function(data) {
      console.log(data);
      getOneMovie();
    }
  });
}



function deleteMovie(id) {
  $.ajax({
    url: "http://localhost:3000/movielist/" + id,
    method: 'DELETE',
    dataType: 'json',
    success: function(data) {
      console.log(data);
    }
  });
}

});
      }
    });

Open in new window

Author

Commented:
$(function() {
  $.ajax({
      method:"GET",
      url: "http://localhost:3000/movielist",
      dataType: "json",
      success: function (response) {
        $.each(response, function(i, movie) {
        const rowText = "<tr>" +
            "<td>" + movie.idmovielist + "</td>" +
            "<td>" + movie.name + "</td>" +
            "<td>" + movie.thumbnail_path + "</td>" +
            "<td>" + movie.description + "</td>" +
            "<td>" + movie.year_released + "</td>" +
            "<td>" + movie.language_released + "</td>" +
            "<td>" + "<button button id = \"deleteMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Delete</button>" + "</td>" +
            "<td>" + "<button button id = \"editMovie\" type=\"button\"  class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Edit</button>" + "</td>";
          $("#movies").append(rowText);
        });
      }
renderMovieList('movies');
  function renderMovieList(){
  $.ajax({
    method:"GET",
    url: "http://localhost:3000/movielist",
    dataType: "json",
    success: function (response) {
      $('#movies').empty();
    $.each(response, function(i, movie) {
    const rowText = "<tr>" +
      "<td>" + movie.idmovielist + "</td>" +
      "<td>" + movie.name + "</td>" +
      "<td>" + movie.thumbnail_path + "</td>" +
      "<td>" + movie.description + "</td>" +
      "<td>" + movie.year_released + "</td>" +
      "<td>" + movie.language_released + "</td>" +
      "<td>" + "<button button id = \"deleteMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Delete</button>" + "</td>" +
      "<td>" + "<button button id = \"editMovie\" type=\"button\"  class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Edit</button>" + "</td>";
      $("#movies").append(rowText);
    });
    }
  });
}
  $("#movieAdded").click(function(a) {
    a.preventDefault();

    let mydata = {
      idmovielist: $($("#newForm")[0].intNum).val(),
      name: $($("#newForm")[0].name).val(),
      thumnail_path: $($("#newForm")[0].thumnail_path).val(),
      description: $($("#newForm")[0].description).val(),
      year_released: $($("#newForm")[0].year_released).val(),
      language_released: $($("#newForm")[0].language_released).val(),
    }

    displayMovie(mydata);

    $("#newForm").trigger("reset");
    $("#newForm").toggle();
  });

  $("#updataMovie").on("click", function(a) {
    a.preventDefault();

    let data = {
      idmovielist: $($("#updateForm")[0].intNum).val(),
      name: $($("#updateForm")[0].name).val(),
      thumnail_path: $($("#updataForm")[0].thumnail_path).val(),
      description: $($("#updateForm")[0].description).val(),
      year_released: $($("#updateForm")[0].year_released).val(),
      language_released: $($("#updateForm")[0].language_released).val(),
    }

    putMovie($($("#updateForm")[0].movieId).val(), data);

    $("#updateForm").trigger("reset");
    $("#updateForm").toggle();
});

function getOneMovie(id) {
  $.ajax({
    url: "http://localhost:3000/movielist" + id,
    method: 'GET',
    dataType: 'json',
    success: function(data) {
      $($("#updateForm")[0].movieId).val(data._id);
      $($("#updateForm")[0].intNum).val(data.intNum);
      $($("#updateForm")[0].name).val(data.name);
      $($("#updateForm")[0].thumnail_path).val(data.thumnail_path);
      $($("#updateForm")[0].description).val(data.description);
      $($("#updateForm")[0].year_released).val(data.year_released);
      $($("#updateForm")[0].language_released).val(data.language_released);
      $("#updateForm").show();
    }
  });
}

function displayMovie(mydata) {
  $.ajax({
    method: "POST",
    url: "http://localhost:3000/movielist/addMovie",
    dataType: "json",
    data: mydata,
    success: function(data) {
       console.log(data);
      renderMovieList();
}
});
}

function loadButtons() {
              $(".editMovie").click(function (a) {
                  getOneMovie($($(this)[0]).data("movieId"));
                  a.preventDefault();
              });

              $(".deleteMovie").click(function (a) {
                  deleteMovie($($(this)[0]).data("movieId"));
                  a.preventDefault();
              });
          }

loadButtons();
function putMovie(data, id) {
  $.ajax({
    url: "http://localhost:3000/movielist/updateMovie/" + id,
    method: 'PUT',
    dataType: 'json',
    data: data,
    success: function(data) {
      console.log(data);
      getOneMovie();
    }
  });
}



function deleteMovie(id) {
  $.ajax({
    url: "http://localhost:3000/movielist/" + id,
    method: 'DELETE',
    dataType: 'json',
    success: function(data) {
      console.log(data);
    }
  });
}

});

Open in new window

is this what you are talking about
Distinguished Expert 2017

Commented:
Yes
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Uncaught SyntaxError: Unexpected identifier I get an unexpeccted identifier

Author

Commented:
$(function() {
  $.ajax({
      method:"GET",
      url: "http://localhost:3000/movielist",
      dataType: "json",
      success: function (response) {
        $.each(response, function(i, movie) {
        const rowText = "<tr>" +
            "<td>" + movie.idmovielist + "</td>" +
            "<td>" + movie.name + "</td>" +
            "<td>" + movie.thumbnail_path + "</td>" +
            "<td>" + movie.description + "</td>" +
            "<td>" + movie.year_released + "</td>" +
            "<td>" + movie.language_released + "</td>" +
            "<td>" + "<button button id = \"deleteMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Delete</button>" + "</td>" +
            "<td>" + "<button button id = \"editMovie\" type=\"button\"  class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Edit</button>" + "</td>";
          $("#movies").append(rowText);
        });
        renderMovieList('movies');
          function renderMovieList(){
          $.ajax({
            method:"GET",
            url: "http://localhost:3000/movielist",
            dataType: "json",
            success: function (response) {
              $('#movies').empty();
            $.each(response, function(i, movie) {
            const rowText = "<tr>" +
              "<td>" + movie.idmovielist + "</td>" +
              "<td>" + movie.name + "</td>" +
              "<td>" + movie.thumbnail_path + "</td>" +
              "<td>" + movie.description + "</td>" +
              "<td>" + movie.year_released + "</td>" +
              "<td>" + movie.language_released + "</td>" +
              "<td>" + "<button button id = \"deleteMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Delete</button>" + "</td>" +
              "<td>" + "<button button id = \"editMovie\" type=\"button\"  class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Edit</button>" + "</td>";
              $("#movies").append(rowText);
            });
            $("#movieAdded").click(function(a) {
              a.preventDefault();

              let mydata = {
                idmovielist: $($("#newForm")[0].intNum).val(),
                name: $($("#newForm")[0].name).val(),
                thumnail_path: $($("#newForm")[0].thumnail_path).val(),
                description: $($("#newForm")[0].description).val(),
                year_released: $($("#newForm")[0].year_released).val(),
                language_released: $($("#newForm")[0].language_released).val(),
              }

              displayMovie(mydata);

              $("#newForm").trigger("reset");
              $("#newForm").toggle();
            });

            }
          });
        }
        $("#updataMovie").on("click", function(a) {
          a.preventDefault();

          let data = {
            idmovielist: $($("#updateForm")[0].intNum).val(),
            name: $($("#updateForm")[0].name).val(),
            thumnail_path: $($("#updataForm")[0].thumnail_path).val(),
            description: $($("#updateForm")[0].description).val(),
            year_released: $($("#updateForm")[0].year_released).val(),
            language_released: $($("#updateForm")[0].language_released).val(),
          }

          putMovie($($("#updateForm")[0].movieId).val(), data);

          $("#updateForm").trigger("reset");
          $("#updateForm").toggle();
      });
      function getOneMovie(id) {
        $.ajax({
          url: "http://localhost:3000/movielist" + id,
          method: 'GET',
          dataType: 'json',
          success: function(data) {
            $($("#updateForm")[0].movieId).val(data._id);
            $($("#updateForm")[0].intNum).val(data.intNum);
            $($("#updateForm")[0].name).val(data.name);
            $($("#updateForm")[0].thumnail_path).val(data.thumnail_path);
            $($("#updateForm")[0].description).val(data.description);
            $($("#updateForm")[0].year_released).val(data.year_released);
            $($("#updateForm")[0].language_released).val(data.language_released);
            $("#updateForm").show();
          }
        });
      }
      function displayMovie(mydata) {
        $.ajax({
          method: "POST",
          url: "http://localhost:3000/movielist/addMovie",
          dataType: "json",
          data: mydata,
          success: function(data) {
             console.log(data);
            renderMovieList();
      }
      });
      }
      function loadButtons() {
                    $(".editMovie").click(function (a) {
                        getOneMovie($($(this)[0]).data("movieId"));
                        a.preventDefault();
                    });

                    $(".deleteMovie").click(function (a) {
                        deleteMovie($($(this)[0]).data("movieId"));
                        a.preventDefault();
                    });
                }

      loadButtons();
      function putMovie(data, id) {
        $.ajax({
          url: "http://localhost:3000/movielist/updateMovie/" + id,
          method: 'PUT',
          dataType: 'json',
          data: data,
          success: function(data) {
            console.log(data);
            getOneMovie();
          }
        });
      }

      function deleteMovie(id) {
        $.ajax({
          url: "http://localhost:3000/movielist/" + id,
          method: 'DELETE',
          dataType: 'json',
          success: function(data) {
            console.log(data);
          }
        });
      }

      }


});
});

Open in new window


This is what I put
Distinguished Expert 2017

Commented:
See at what line you have the problem, and he post an image of the console and with the specific line code

Author

Commented:
@Leonidas Dosas so
$(function() {
  //Fill the list when the page loaded
  renderMovieList('movies');

  $("#movieAdded").click(function(a) {
    a.preventDefault();

    let mydata = {
      idmovielist: $($("#newForm")[0].intNum).val(),
      name: $($("#newForm")[0].name).val(),
      thumnail_path: $($("#newForm")[0].thumnail_path).val(),
      description: $($("#newForm")[0].description).val(),
      year_released: $($("#newForm")[0].year_released).val(),
      language_released: $($("#newForm")[0].language_released).val(),
    }

    displayMovie(mydata);

    $("#newForm").trigger("reset");
    $("#newForm").toggle();
  });

  $("#updateMovie").on("click", function(a) {
    a.preventDefault();

    let updatedata = {
      idmovielist: $($("#updateForm")[0].intNum).val(),
      name: $($("#updateForm")[0].name).val(),
      thumnail_path: $($("#updateForm")[0].thumnail_path).val(),
      description: $($("#updateForm")[0].description).val(),
      year_released: $($("#updateForm")[0].year_released).val(),
      language_released: $($("#updateForm")[0].language_released).val(),
    }

    putMovie(updatedata);

    $("#updateForm").trigger("reset");
    $("#updateForm").toggle();
  });

  $("body").on('click', '.editMovie', function(a) {
    a.preventDefault();

    renderMovieList($($(this)[0]).data("movieId"));
  });

  $("body").on('click', '.deleteMovie', function(a) {
    a.preventDefault();

    deleteMovie($($(this)[0]).data("movieId"));
  });
});

//FUNCTIONS PART----------------------------------------------

function renderMovieList() {
  $.ajax({
    method: "GET",
    url: "http://localhost:3000/movielist",
    dataType: "json",
    success: function(response) {
      $('#movies').empty();
      $.each(response, function(i, movie) {
        const rowText = "<tr>" +
          "<td>" + movie.idmovielist + "</td>" +
          "<td>" + movie.name + "</td>" +
          "<td>" + movie.thumbnail_path + "</td>" +
          "<td>" + movie.description + "</td>" +
          "<td>" + movie.year_released + "</td>" +
          "<td>" + movie.language_released + "</td>" +
          "<td>" + "<button button id = \"deleteMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Delete</button>" + "</td>" +
          "<td>" + "<button button id = \"editMovie\" type=\"button\"  class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Edit</button>" + "</td>";
        $("#movies").append(rowText);
      });
    }
  });
}


function displayMovie(mydata) {
  $.ajax({
    method: "POST",
    url: "http://localhost:3000/movielist/addMovie",
    dataType: "json",
    data: mydata,
    success: function(data) {
      console.log(data);
      renderMovieList();
    }
  });
}

function putMovie(updatedata) {
  $.ajax({
    url: "http://localhost:3000/movielist/updateMovie/17",
    method: 'PUT',
    dataType: 'json',
    data: updatedata,
    success: function(data) {
      console.log(data);
      renderMovieList();
    }
  });
}

function deleteMovie(id) {
  $.ajax({
    url: "http://localhost:3000/movielist/" + id,
    method: 'DELETE',
    dataType: 'json',
    success: function(data) {
      console.log(data);
    }
  });
}

Open in new window


I have this code but for some reason I get the 200 ok response going for my put but my data is not updating

app.put('/movielist/updateMovie/:id',(req,res) =>{
  let update = req.body;
  mysqlConnection.query("UPDATE movielist SET name = '', thumnail_path = ?, description = ?, year_released = ?, language_released = ? WHERE idmovielist = ?",
 [update.name,update.thumnail_path,update.description,update.year_released,update.language_released,req.params.id],function (err, results) {
    if (!err) {
      res.send("Movie list is updated");
    } else {
      console.log(err);
    }
  });
});

Open in new window

above is my app.js code

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial