I'm new to Ajax/jQuery and I am doing an assignment where I must use http method PUT
to update a django model. The code I currently have works except for one issue : the PUT
request is being run multiple+1 times each time I click on a new modify button and submit the form.
Example via console.log
:
(index):121 BUTTON: Pressed modify on product ID: 87
(index):133 GET: Looped through products for ID 87 and set the values in the modal accordingly
(index):153 PUT: Received put request for ID: 87
(index):121 BUTTON: Pressed modify on product ID: 88
(index):133 GET: Looped through products for ID 88 and set the values in the modal accordingly
(index):153 PUT: Received put request for ID: 87
(index):153 PUT: Received put request for ID: 88
(index):121 BUTTON: Pressed modify on product ID: 89
(index):133 GET: Looped through products for ID 89 and set the values in the modal accordingly
(index):153 PUT: Received put request for ID: 87
(index):153 PUT: Received put request for ID: 88
(index):153 PUT: Received put request for ID: 89
Code for ajax:
// MODIFYING A PRODUCT
product_ul.on("click", ".modify", function () { // On clicking modify
var id = $(this).parents('li').attr('id'); // Get the PK which is the ID of the <li>
console.log("BUTTON: Pressed modify on product ID: " + id);
$.ajax({
type: 'GET',
url: 'get/',
dataType: 'json',
success: function (data) {
$.each(data, function (key, value) { // Loop through all products from the json response
if (value.id == id) { // If PK matches product PK from response
$('#dataModal').modal("show"); // Show modal
$('#edit_name').val(value.name); // Set the values
$('#edit_description').val(value.description);
$('#edit_price').val(value.price);
console.log("GET: Looped through products for ID " + id + " and set the values in the modal accordingly");
}
});
}
});
$("#modify_product_form").submit(function (event) { // On submitting the modify form
event.preventDefault(); // Prevent refresh
var product_data = { // Get the values from the form
name: $('#edit_name').val(),
description: $('#edit_description').val(),
price: $('#edit_price').val()
};
$.ajax({
type: 'PUT',
url: 'modify/' + id + '/',
data: product_data,
beforeSend: function (xhr) {
xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
console.log("PUT: Received put request for ID: " + id);
},
success: function (product) {
var product_html = "<li id=" + product.id + "><button class='delete btn btn-xs btn-danger'><span class='glyphicon glyphicon-remove'></span></button>" +
" <button class='modify btn btn-xs btn-warning'><span class='glyphicon glyphicon-cog'></span></button> " +
product.name + "</li>";
$('#' + product.id).html(product_html); // Change the html to the modified version so it updates the list
$('#dataModal').modal("hide"); // Hide the modal
}
});
});
});
This is how the webpage looks:
And after clicking the modify button:
My only assumption so far is that the $("#modify_product_form").submit(function (event)
is within product_ul.on("click", ".modify", function ()
thus causing some conflict but I don't know how else I could get the var id
without having them nested.
How I expect the console.log
to look like:
(index):121 BUTTON: Pressed modify on product ID: 87
(index):133 GET: Looped through products for ID 87 and set the values in the modal accordingly
(index):153 PUT: Received put request for ID: 87
(index):121 BUTTON: Pressed modify on product ID: 88
(index):133 GET: Looped through products for ID 88 and set the values in the modal accordingly
(index):153 PUT: Received put request for ID: 88
(index):121 BUTTON: Pressed modify on product ID: 89
(index):133 GET: Looped through products for ID 89 and set the values in the modal accordingly
(index):153 PUT: Received put request for ID: 89
Please let me know if I should provide any other code and I apologise if your eyes hurt from seeing my amateur coding!
140256257
You're adding a submit event handler for your form ( // On submitting the modify form
) inside your click handler for the product ( // On clicking modify
). That means that every time you click on a product ul
, a new copy of the submit event handler gets added. When the form is submitted, all of these copies get called, and they all do a PUT request.
The solution would be to move the form's submit handler out of the way, that is, outside the click handler. That would make sure it's only added once.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.