ASP.net Core MVC : How to fix looped results?

Question

I have a problem when saving items on my application, items are listed from a table. Everytime I save the updated items , the items tend to loop after saving.

This is my event of the button.

$('#saveEventBTN').click(function (event) {
        //EventManager.SaveEventBYApprover();
        EventManager.MultipleSave();
        event.preventDefault();
    });

This one is from the .Change event on the dropdown menu where I can enter the ids in the arrays that I will use for the looping saving transaction.

  $("#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;
            }
        });

This are the functions on my module :

This only loops the global array variable for the ids of the array.

EventManager.MultipleSave = function () {
    for (let i = 0; i < idEventMulti.length; i++) {
        EventManager.SaveEventBYApprover(idEventMulti[i], idApproveStatusMulti[i]);
    }
}

This one is the Ajax call to save:

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();   
        }
    });
}

This is how it looks like after the transactions successfully save.

enter image description here

user_85215 · Answer

I think you're correct in assuming the problem is called by multiple calls to EventManager.BindDataTable in the ajax success callbacks.

It's not a solution to call this method after the for loop in EventManager.MultipleSave, because this code will be called immediately after starting the ajax calls, which are asynchronous.

What you want is to set up some code that runs after all the asynchronous save ajax calls have completed. This is quite messy to achieve with the current callback model you're using.

Instead you can exploit that the $.ajax function returns a Promise. This means that if you return the result of $.ajax from EventManager.SaveEventBYApprover, you can collect these in an array in EventManager.MultipleSave, and then use something like:

$.when(myAjaxPromises).then(function() { 
   // code that runs after all saves goes here
}, function() {
   // error handling goes here
});

ASP.net Core MVC : How to fix looped results?

1 Answers