Data not updating

Adil Ali
Adil Ali used Ask the Experts™
on
So unfortunetly my data is not updating even though I get a status request of 200 ok below are my front end and back end code
and below I have a screen shot and my front end and back end code I do not know why it is not updating in the front end when I do it on postman it does update and the querry works

data-not-updating.png
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);
    }
  });
});

$(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 data = {
      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($($("#updateForm")[0].movieId).val(), data);

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

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

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

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

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

});

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

function renderMovieList() {
  alert('getList');
  $.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 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 putMovie(data) {
  $.ajax({
    url: "http://localhost:3000/movielist/updateMovie/2",
    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

Comment
Watch Question

Do more with

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

Commented:
I am going to ask the same question I did before - where is your update code happening?
Because if it is here
function putMovie(data) {
  $.ajax({
    url: "http://localhost:3000/movielist/updateMovie/2",
    method: 'PUT',
    dataType: 'json',
    data: data,
    success: function(data) {
      console.log(data);
      getOneMovie();
    }
  });
}

Open in new window

Then you are not calling renderMovieList() in the call back.

I asked the question for a reason - you did not respond. Please can you do so now.

The reason your list is not updating is because you are not updating it - you are not calling the code to update. So to fix it
first you find the code where your update happens
then you add the renderMovieList() call to the callback in that code.

Author

Commented:
@Julian Hansen sorry my other account was suspended so this it my new account so
 
is this what you want me to do

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

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
PLEASE use CODE tags for your code snippets!!
Is that your updateCode? If so then yes - if not then I ask again - where do you do your update?

function putMovie(updatedata) {
  $.ajax({
    url: "http://localhost:3000/movielist/updateMovie/17",
    method: 'PUT',
    dataType: 'json',
    data: updatedata,
    success: function(data) {
      console.log(data);
      getOneMovie(); /* <====== WHAT IS YOUR THINKING HERE ? WHY IS THIS HERE? */
      renderMovieList();
    }
  });
} 

Open in new window

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!

leakim971Multitechnician
Top Expert 2014

Commented:
You need a server WEB to do that.
Your URL is : c:/xampp/htdocs/UI%20CRUD/index.html
And you do an Ajax call to : http://localhost:3000/movielist/updateMovie/17

Ajax work with the following rules :
- you MUST use HTTP or HTTPS protocol
- You MUST share the same domain and protocol (port) between the page and the target servet

You fail in both :)

Author

Commented:
@leakim971 so do you want me to Change the file location

Author

Commented:
@Julian Hansen the getOneMovie is where I want to do my update I am using that function to update atleast one move by id   https://youtu.be/Fn7LZl9XKao 

Here is the link I was following
leakim971Multitechnician
Top Expert 2014

Commented:
do you want me to Change the file location :

Not me... but you should have your code here :
http://localhost:3000/UI%20CRUD/index.html
or :
http://localhost:3000/index.html
or :
http://localhost:3000/NOMATTER/index.html

to do an ajax call to : http://localhost:3000/anythingyouwant
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
@Julian Hansen the getOneMovie is where I want to do my update I am using that function to update atleast one move by

.... except that your function is doing a GET not a POST / PUT - so how can it be doing an update?

It looks like you have followed an overly complicated tutorial - what is it you are wanting to actually do - I am assuming it is not create a movie database?

Author

Commented:
No i don’t want to create a database all I want to do is execute my put method on the front end

Author

Commented:
@Julian Hansen which function is executing s get is it the getOneMovie or renderMovielist

Author

Commented:
@Julian Hansen actually not I want it at my render function

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

Author

Commented:
@leakim971 and do you know how I can go about that process of linking my localhost:3000 to my html file

Author

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

Open in new window

This here is my update function
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Here is the basic outline of what you want to do

$(function() {
    renderMovieList();
    ...
    $('#addMovie').click(function() {
        $.ajax({
           //... setup your POST / PUT here
        }).then(function() {
            // refresh the list
            renderMovieList();
        });
    });
});

Open in new window


That's all. If this were me I would get just that bit working first - forget about the other functions for now.

Just get renderMovieList() working and the addMovie() function (linked to your existing dialog.

Author

Commented:
So I have to add a .then()

Author

Commented:
and in the //refresh movielist I put a.preventdefault();

Author

Commented:
@Julian Hansen

$(function() {
  //Fill the list when the page loaded
  renderMovieList('movies');

  $("#movieAdded").click(function(a) {
    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(),
    }

    $("#newForm").trigger("reset");
    $("#newForm").toggle();
    $.ajax({
      method: "POST",
      url: "http://localhost:3000/movielist/addMovie",
      dataType: "json",
      data: mydata,
      success: function(data) {
        console.log(data);
        renderMovieList();
      }
    }).then(function(){
      renderMovieList();
      a.preventDefault();
    });
  });

  $("#updateMovie").on("click", function(a) {
    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(),
    }

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

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

  $("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 deleteMovie(id) {
  $.ajax({
    url: "http://localhost:3000/movielist/" + id,
    method: 'DELETE',
    dataType: 'json',
    success: function(data) {
      console.log(data);
    }
  });
}

Open in new window


So is this what you wanted me to do am I missing something
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You should define a success AND .then()
.then() is the current way for handling the callback - success was the old way.

Use .then() take out the success

PreventDefault does not go in your AJAX complete - it is there to prevent an event bubbling up through the DOM - you put it in your event handlers when you want o prevent the default functionality. For instance when you click on an <a> element but you don't want to navigate to the link OR you click a submit button but you don't want to do a default submit.

Typically in your .click() handler you would make this the first call

$(selector).click(function(e) {
   e.preventDefault();
   // override click functionality here
})

Open in new window


Your delete handler would also need to include renderMovieList() in the callback.

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