The problem is the following, there is a code by which I change the records in the database. I implement through ajax calculate the product id on which the click was made, and form the path = '/' + id , if you reload the page everything works well, and if you change several goods in a row, the product id immediately taken from the previous value, and then from that which click was made. Example:

  1. I click on the item whose id 6 , in the getEditData function, the id item is calculated, we get 6 , there is a query to the database, everything changes perfectly.

  2. Then, without reloading the page, I click on another product for which id = 7 , it is calculated - id = 7 , 2 requests are sent, 1 - with id 6 , then with id = 7 . I just can not understand why this is happening, please help.

Client Code: Form

 <div class="page-edit"> <p class="close">x</p> <form method="put" action="" id="the-edit-form"> <table class="edit-table" cellpadding="5"> <tr> <td class="label" valign="top">Name</td> <td valign="top">: <input type="text" name="NAME" value="" required="required"></td> </tr> <tr> <td class="label">Price</td> <td>: <input type="number" name="PRICE" value="" required="required" pattern="[A-Za-z0-9]{1,20}"></td> </tr> <tr> <td class="label">Rating</td> <td>: <input type="number" name="RATING" value="" step="0.1" min="1" max="5" required="required" pattern="[A-Za-z0-9]{1,20}"></td> </tr> <tr> <td class="label"></td> <td> &nbsp; <input type="submit" name="submit" value="send"> <input type="button" name="cancel" value="cancel" class="cancel"> </td> </tr> </table> </form> </div>

Js

 function getEditData(event) { let currentRow = $(event.target).closest("tr").find('td'), currentTh = $('.table thead').find('th'), dataRow = {}, id = ''; for (let i = 1; i < currentRow.length - 1; i++) { $("table.edit-table input[name='" + currentTh[i].textContent + "']").val(currentRow[i].textContent); (dataRow[currentTh[i].textContent] = currentRow[i].textContent); } //определяю id записи по которой был клик id = currentRow[0].textContent; //my stop $('#the-edit-form').submit(function(event) { $.ajax({ //Подставляю полученный id из url: "/" + id, type: "put", data: $("#the-edit-form").serialize(), success: function(res) { $('.page-edit, .backpopup').fadeOut(); $('#update').removeClass('denial').addClass('success').html("Data have been updated successfully"); return false; }, error: function(xhr, status, error) { $('#update').removeClass('success').addClass('denial').html("Data haven't been updated"); showErrors(xhr); } }); event.preventDefault(); }); } function openEdit(event) { if ($(event.target).hasClass('edit', 'open')) { getEditData(event); $('.page-edit').popup(); } else { $('.page-data').popup(); } }

main table

 <p id="update"></p> <table class='table'> <caption>TABLE</caption> <thead> <tr> <th>ID</th> <th>NAME</th> <th>PRICE</th> <th>RATING</th> </tr> </thead> <tbody> {{#each data}} <tr> <td>{{id}}</td> <td>{{name}}</td> <td>{{price}}</td> <td>{{rating}}</td> <td> <p class="edit" onclick="openEdit(event)">Edit</p> <p class="delete" onclick="deleteUser({{id}})">Delete</p> </td> </tr> {{/each}} </tbody> </table> <div class="backpopup"></div> <div class="err-area"></div>
  • sort of figured out, submit writes events to the form, and when they are sent, they work in turn, how can someone fix the MB? - aliaksandr Kakhanovich
  • solved the problem, but it seems to me that my solution is crooked - but it seems to work, I delete the form submit handler ($ ('# the-edit-form'). unbind ('submit')) in success and error so as not to leave traces) if there is any Some other way, I will be glad to hear, thank you. - aliaksandr Kakhanovich
  • where is openEdit called? - Igor
  • it's for pop up windows in which we change values, forgot to add, sorry - aliaksandr Kakhanovich

0