Is there a way to tell if the last ajax call is finished?

Question

I have this site that i am working on that i need to figure out when the last ajax call is finished...I am using this jQuery plugin and all works great but the problem is the client uploads 2 files at a time... and i need to redirect to another page after the last ajax call. If you look the it in firebug while uploading files it run http://dev.posnation.com/test/j/example/upload.php twice and i need to have the page redirect after and only after the second run..is there a way in javascript or jQuery to tell if the ajax calls are complete.

Here is the code that instantiates it

// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload();

and there is a onDone function in the jQuery.fileupload.js

    _onDone: function (result, textStatus, jqXHR, options) {

but its running after the first run not after both files are uploaded....any ideas on how i can redirect to another page after both files are uploaded....thanks in advance

Jason · Accepted Answer · 2011-11-18T05:28:10.633

3

the short answer is to decrement a counter in the onDone callback. one possible implementation would be to use a global variable as illustrated below:

var numberFilesToUpload = 2;

// code to upload file
onDone: function() {
 // this is the upload plug-ins callback function
 numberFilesToUpload--;
 if (numberFileToUpload == 0) {
   windows.location.href = "/uploading-finished";
 }
}

there are more elegant solutions, but they will all involve decrementing a counter.

edited Nov 18 '11 at 05:28

answered Nov 18 '11 at 05:14

Jason

15,915
3
48
72

What file do i put var numberFilesToUpload = 2; and is it on the top of the file – Matt Elhotiby Nov 18 '11 at 05:19
What if one fails and does not return? Or do you not want to redirect at that point? Your count will be corrupt at that point. – griegs Nov 18 '11 at 05:20
Global variables is polluting your scope. – steveyang Nov 18 '11 at 05:22
Declare the global on the page that hosts the upload plugin. @Griegs I think OnDone fires regardless of whether there is an error. You would use the jqXHR object to determine the status. – Jason Nov 18 '11 at 05:23
@steven.yang - agreed, a more elegant solution would be to create a javascript object that tracks the number of files to upload, their status, and would be responsible for redirecting when the uploads are finished. however, it would operate on the same basic principal it just takes longer to code, and would obfuscate the answer. which is decrement a counter in the ondone callback method. – Jason Nov 18 '11 at 05:26
@jason, I posted a solution using Js closure to produce a function takes a local record of the counter. – steveyang Nov 18 '11 at 05:29

score 3 · Answer 2 · edited May 23 '17 at 11:47

You could use closure to produce the function which has a local records for files have uploaded.

var fileUploads = function (filesNum, callback) {
    var numberFilesToUpload = filesNum;
    // code to upload file
    return function() {
     // this is the upload plug-ins callback function
     numberFilesToUpload--;
     if (numberFileToUpload == 0) {
       callback();
     }

    };

}(2, function () {
  //what you want to do when files are all uploaded.
});

fileUploads will fire the callback function after 2 files are uploaded. The callback and filelimits are specified in this line

var fileUploads = function () {
  //...
} (2, function () {});

this would be an example of a more elegant solution that decrements a counter. well done. — Jason, Nov 18 '11 at 05:31

Is there a way to tell if the last ajax call is finished?

2 Answers2