asynchronous call with ajaxSubmit - jquery.form

Question

I have a form with certain action. When the form is submitted I send an ajax call that calls this action. In the otherhand, I am sending another ajax call to update the progress. I have done it as follows:

    $("form").submit(function() {               
      function callBack()
      {
            if( (this.readyState == 4) && (this.status == 200) )
            {
              console.log(this.responseText);
            }
      }

      function updateProgress (){
        asyncReq('/get_progress?progress='+progress, callBack);
      }

      function asyncReq(url, functionCallBack)
      {
            var request; //request must be a local var to avoid race condition
            try
            {   //for modern browsers
              request = new XMLHttpRequest;
            }
            catch (err)
            {// legacy IE
              request = new ActiveXObject("Microsoft.XMLHTTP");
            }
            request.onreadystatechange = callBack;
            request.open("GET", url, true);
            request.send();
      };
      var progress = $("#progress").val();
      asyncReq('/get_progress?progress='+progress, callBack);
      setTimeout(updateProgress, 2000);
      $(this).ajaxSubmit({async: true});
      return false;
   });

I have 2 asynchronous javascript calls here, one for submitting the form and one for updating the progress. When I print out the responseText in callBack, I can only see 0.0 and 1.0. That is one before the ajaxSubmit() is called and after it is finished. I would like to get all the value of the progress in the middle as well. As far as I understand, the 2nd ajax call for asyncReq is called only after the ajaxSubmit is finished. Can anyone give me any idea about how I make the another complete ajax call before the ajaxSubmit() is complete?

Note:

The form consists of file field and ajaxSubmit unzips, processes the file and updates the progress table after each file is processed. The get_progress method extracts the progress value of that table. I am using jquery.form.js for submitting the form by ajax call.

Answer 1

I'm not clear what you've tried to achieve. However, here is simplified version of your codes.

function updateProgress(){
    var progress = $("#progress").val();
    $.get('/get_progress?progress='+progress, function(data){
        //***you will get response in data
        //here you write how to handle progress and data
    }
    setTiemout('updateProgress()', 2000)

}
$('form').submit(function(){
    updateProgress();
    $(this).ajaxSubmit({async: true});
})

I'm not sure what ajaxSubmit() function actually does for you! As name suggests, I guess it just submits the form. Now if you want to put your own logic for showing progress, you just put that logics in *** marked area.

Answer 2

You have submitted 3 concurrent ajax requests after two seconds:

1. asyncReq('/get_progress?progress='+progress, callBack);
2. setTimeout(updateProgress, 2000); (which runs later)
3. $(this).ajaxSubmit({async: true});

Are you using an older browser? If so you will run up against the two connection limit. See Max parallel http connections in a browser? and How many concurrent AJAX (XmlHttpRequest) requests are allowed in popular browsers?

If there is a limit on the number of concurrent requests, your timeout request will be queued on the browser and submitted only after the ajax form or first progress is complete.

Answer 3

It looks like your code is only updating the progress once after 2000 milliseconds. This line:

setTimeout(updateProgress, 2000);

Have you tried setting an update interval instead? This will make that code run every xxxx milliseconds. Like this:

myVar=setInterval(updateProgress,2000);

Then you need to use clearInterval to stop that code from running. Like this:

clearInterval(myVar);

Notice that I had to add the variable myVar. It is needed for the clearInterval function and will need to be available for it to work. You may have to define it globally as var myVar.

Answer 4

Please, check this.

The setTimeout function delays for a specified time period and then triggers execution of a specified function. Once the function is triggered the setTimeout has finished.

The setInterval function also delays for a specified time before triggering the execution of a specific function. Where it differs is that after triggering that function the command doesn't complete. Instead it waits for the specified time again and then triggers the function again and continues to repeat this process of triggering the function at the specified intervals until either the web page is unloaded or the clearInterval function is called.

Answer 5

Following @HungryCoder's response, you're only missing one thing. You must return false from the form submission.

$('form').submit(function(){
    updateProgress();
    $(this).ajaxSubmit({async: true});
    return false;
});

Without the return false, the form will still do what it does naturally. Alternatively, you could capture the submit event variable.

$('form').submit(function( e ){
    e.preventDefault();
    updateProgress();
    $(this).ajaxSubmit({async: true});
    return false;
});

Calling e.preventDefault() will also prevent the form from doing it's default browser-defined activity (i.e. submitting to the server).