asked on

PUT and Delete Front end

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

Leonidas Dosas

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

Adil Ali

ASKER

$(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

Leonidas Dosas

Yes

Adil Ali

ASKER

Uncaught SyntaxError: Unexpected identifier I get an unexpeccted identifier

Adil Ali

ASKER

$(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

Leonidas Dosas

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

Adil Ali

ASKER

@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

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.