Tengo un problema al guardar elementos en mi aplicación, los elementos se enumeran en una tabla. Cada vez que guardo los elementos actualizados, los elementos tienden a repetirse después de guardarlos.
Este es mi evento del botón.
$('#saveEventBTN').click(function (event) { //EventManager.SaveEventBYApprover(); EventManager.MultipleSave(); event.preventDefault(); });Este es del evento .Change en el menú desplegable donde puedo ingresar las identificaciones en las matrices que usaré para la transacción de guardado en bucle.
$("#tableApprovalState" + idEvent + "").change(function (event) { idApproveStatus = $("#tableApprovalState" + idEvent + "").val(); event.preventDefault(); // Adding the event into an array for multiple selection. if (idEventMulti.indexOf(idEvent) !== -1) { var del = idEventMulti.indexOf(idEvent); idEventMulti.splice(del, 1); idApproveStatusMulti.splice(del, 1); idEventMulti[idEventMulti.length] = idEvent; idApproveStatusMulti[idApproveStatusMulti.length] = idApproveStatus; } else { idEventMulti[idEventMulti.length] = idEvent; idApproveStatusMulti[idApproveStatusMulti.length] = idApproveStatus; } });Estas son las funciones en mi módulo:
Esto solo repite la variable de matriz global para los identificadores de la matriz.
EventManager.MultipleSave = function () { for (let i = 0; i < idEventMulti.length; i++) { EventManager.SaveEventBYApprover(idEventMulti[i], idApproveStatusMulti[i]); } }Esta es la llamada Ajax para guardar:
EventManager.SaveEventBYApprover = function (idevent, ideventstatus) { $.ajax({ url: "/Modules/SaveEvent", type: "POST", data: { IdEvent: idevent, IdEventStatus: ideventstatus, LastModifiedBy: user }, dataType: "json", success: function (data) { $("#successMsg").html("").html(data.msg); $("#successConfirmModal").modal("show"); searchResultsTable.clear().draw(); EventManager.BindDataTable(); } }); }Así es como se ve después de que las transacciones se guardaron con éxito.

Creo que tiene razón al suponer que el problema se debe a múltiples llamadas a EventManager.BindDataTable en las devoluciones de llamada exitosas de ajax.
No es una solución llamar a este método después del bucle for en EventManager.MultipleSave , porque este código se llamará inmediatamente después de iniciar las llamadas ajax, que son asíncronas.
Lo que desea es configurar un código que se ejecute después de que se hayan completado todas las llamadas ajax guardadas asíncronamente. Esto es bastante complicado de lograr con el modelo de devolución de llamada actual que está utilizando.
En su lugar, puede aprovechar que la función $.ajax devuelve una Promesa. Esto significa que si devuelve el resultado de $.ajax de EventManager.SaveEventBYApprover , puede recopilarlos en una matriz en EventManager.MultipleSave y luego usar algo como:
$.when(myAjaxPromises).then(function() { // code that runs after all saves goes here }, function() { // error handling goes here });