Waiting on jQuery AJAX calls to complete

Question

I have an upload button that when clicking calls an ajax function to upload document. Once that function runs I call another ajax function to refresh a table on screen displaying all my documents. I have been looking at this question - Wait until all jQuery Ajax requests are done?

which would seem to be what I need. However I am un-sure how to implement for my current code. I have:

$("#UploadButton").on('click', function () {
           doUpload(); // My First AJAX function
           refreshTable(); // My Second AJAX Function
       });

My doUpload AJAX function is as below:

function doUpload() {
        $.ajax({
            url: 'myupload url',
            type: 'POST',
            data: new FormData($('#uploadForm')[0]),
            processData: false,
            contentType: false,
            success: function () {
                $.growlUI('Document Uploaded Sucessfully');
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status + " " + thrownError);
            }
        });
    }

My refreshTable ajax function then is:

function refreshTable() {
    $.ajax({
        url: 'url to get all files',
        type: 'GET',
        data: $('#searchForm').serialize(),
        success: function (data) { populateTable(data); },
        error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status + " " + thrownError); }
    });
    return false;
}

If I upload a document with current solution the success function of refreshTable seems to get hit too quickly and it doesn't have the find the most recent file uploaded. I had tried to add the call to refreshTable() in the success function of my doUpload with a setTimeout of 5 seconds and sometimes this was working and refreshing the table but other times it wasn't uploading the table.

I then changed the click handler on the button to the below to attempt to have the functionality the other StackOverflow answer I linked to above has but this isn't working either

$("#UploadButton").on('click', function () {
            $.when(doUpload()).done(function() {
               refreshTable();                
             });
        });

score 2 · Accepted Answer · answered Nov 02 '14 at 21:12

2

You can use callback mechanism.

function doUpload(callback) {
    $.ajax({ //some parameters
        success: function (data) {
            //do some work here
            callback();
        }
    );
}

Then you can call the function chain as:

doUpload(refreshTable);

answered Nov 02 '14 at 21:12

Batuhan Tasdoven

798
7
19

The callback seems to be working but the refresh table function still is getting hit to early to pick up the newly uploaded file - is there anyway I could add an extra delay before the callback is executed? – TheRiddler Nov 02 '14 at 21:40
there is `setTimeout` function in JS, but the code I provided should work for you. Are you sure you didn't add the `()` of `refreshTable`? – Batuhan Tasdoven Nov 02 '14 at 21:52
@TheRiddler, [Example](http://jsfiddle.net/wptv9x2v/1/) works as it should be. Can you feed me with a fiddle? – Batuhan Tasdoven Nov 02 '14 at 22:37

score -1 · Answer 2 · answered Nov 02 '14 at 21:15

EDIT : @qamyoncu answers is better than mine.

In AJAX, calls are done async. that's why you don't get what you want.

Here is a tricky solution to avoid the problem you have:

function doUpload(init) {
        var res = null;
        var _init = init || false;

        if (!_init) {
            _init = true;
            $.ajax({
                /// ajax call for doUpload()...
            });
        }

        if (res == null) {
            setTimeout(function(){ doUpload(_init); }, 100);
        } else {
            refreshTable();
        }
    }

Waiting on jQuery AJAX calls to complete

2 Answers2