CODEWITHSUNDEEP
javascriptjquery
Samantha J T Star
Samantha J T Star

Reputation: 32798

How can I be sure my Ajax call has fully completed?

I have the following code:

   $.ajax({
        cache: false,
        url: "/Administration/" + entity + "s/Update",
        data: { pk: pk, rk: rk, fld: type, val: val },
        success: function () {
            disableLoadingIcon();
            if (idArr.substr(0, 8) == 'Position') {
                location.reload(); 
            }
        }
    });

When a user changes some data the code updates the database. There is code that comes before this that picks the data values and it all works good.

When the user changes the Position column the database gets changed and I wanted to trigger a refresh of the screen (it's a report screen sorted by position). The refresh works but it seems like it is out of sync. I have the location.reload() in the success area but is it possible that is getting run before the Ajax has completed?

Is it possible that this kind of refresh is taking place before the database has been properly updated? When I do another refresh of the page manually from the browser the data always appears in the correct order.

Upvotes: 0

Views: 81

Answers (4)

Shyju
Shyju

Reputation: 218732

Whatever you write inside the success handler will be executed only after the completion of the ajax request you made to the server page. so you can load the updated content in that handler.you can use a parameter to accept the response from your success function and check whether your transaction is success or not.

From your server page, after making the database update,you can return true or false. 

 $.ajax({
        cache: false,
        url: "/Administration/" + entity + "s/Update",
        data: { pk: pk, rk: rk, fld: type, val: val },
        success: function (data) {
           // This will be excuted only after you receive a response from your server page
           if(data=="true")  //db updated properly
           {
              disableLoadingIcon();
              if (idArr.substr(0, 8) == 'Position') {
                location.reload(); 
              }
           }
           else
           {
              alert("Error in updating the data");
           }

        }
    });

Upvotes: 1

Aleksandar Vucetic
Aleksandar Vucetic

Reputation: 14953

Your document is cached. You shouold use

location.reload(true)

to realod with clear cache.

Upvotes: 2

dku.rajkumar
dku.rajkumar

Reputation: 18568

there is a API in jquery ajaxComplete. whenever a ajax call will be completed this will be invoked.

$.ajaxComplete(function(){
//do something
});

reference : http://api.jquery.com/ajaxComplete/

Upvotes: 1

Marc B
Marc B

Reputation: 360672

AJAX is asynchronous by default. Once the call is issued, the rest of your code will continue executing. If the value of location gets changed before the ajax call returns its data, the success function will be using the current-at-the-time-it-executes value of location, which is now something different than what it was when the ajax call started.

The success code will not run until the ajax call returns, so that's not the problem. but you're depending on location not being changed between the time you start the ajax stuff and the time it completes.

Upvotes: 1

Related Questions