Question

I got an Ajax function that looks like this

function PersonAtlLawUpdate(personRef) {
var selectionPanel = $('div#SelectionPanel');
var fromdate = selectionPanel.find('input#FromDateTextBox')[0].defaultValue;
var timeSpan = selectionPanel.find('select#TimeSpanDropdownList').data('timespanvalue');
var url = "MonthOverview.aspx/OnePersonAtlLawUpdate";
$.ajax({
    url: url,
    data: JSON.stringify({ personRef: personRef, fromdate: fromdate, timespan: timeSpan }),
    type: "POST",
    contentType: "application/json",
    dataType: "JSON",
    context: document.body,
    success: function (atlError) {
        changePersonAtlStatusIcon(atlError, personRef);
    },
    error: function (xhr, status, errorThrown) {
        //alert(errorThrown + '\n' + status + '\n' + xhr.statusText);
    }
});

}

In one function I need to run this twice like this:

    PersonAtlLawUpdate($(gMarkedCell).parent("tr").attr("personref"));
    PersonAtlLawUpdate(pRef);

The problem that can be is that in some cases doesn’t work 100%. The dom doesnt update in one of the functions. And I think it is because the other one “overwrites” it.

So how do I make sure that the second “PersonAtlLawUpdate” runs after the first one completes? Doesnt seems good to put a delay on it. And is it a good solution to set async to false in the ajax call?

EDIT,
tride like this and placed a console.log in my success. But “all complete” will run first of them:

$.when(PersonAtlLawUpdate($(gMarkedCell).parent("tr").attr("personref")), PersonAtlLawUpdate(pRef)).then(function (){console.log("all complete")});

Answer 1

You can just use a callback function so that it executes right after the first one has executed:

PersonAtlLawUpdate($(gMarkedCell).parent("tr").attr("personref"), function(){
  PersonAtlLawUpdate(pRef);
});

Or maybe you can rethink the problem, and come up with a solution that doesn’t require calling the same function twice. Maybe you don’t really need to do this.