Asynchronous call using ajaxSubmit - jquery.form

Question

I have a form with a specific action. When the form is submitted, I submit an ajax call that invokes this action. On the other hand, I am sending another ajax call to update progress. I did 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, one for submitting a form and one for updating progress. When I type responseText in callBack , I can only see 0.0 and 1.0. This is before ajaxSubmit() is called and after it completes. I would like to get all the value of progress in the middle as well. As far as I understand, the second ajax call for asyncReq is called only after ajaxSubmit completed. Can someone give me an idea of ​​how I make another full ajax call before ajaxSubmit() ?

Note:

The form consists of a file field and ajaxSubmit unzips, processes the file and updates the execution table after processing each file. The get_progress method retrieves the progress value of this table. I am using jquery.form.js to submit a form by ajax call.

Answer 1

I don’t understand what you were trying to achieve. However, here is a 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 the ajaxSubmit() function really does for you! As the name suggests, I assume that it simply represents the form. Now, if you want to put your own logic to make progress, you just put that logic in the marked area *** .

Answer 2

You sent 3 simultaneous ajax requests in two seconds:

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

Are you using an older browser? If so, you will encounter two restrictions on the connection. See Maximum Parallel http Connections in a Browser? and How many concurrent AJAX requests (XmlHttpRequest) are allowed in popular browsers?

If there is a limit on the number of simultaneous requests, your timeout request will be queued in the browser and sent only after the completion of the ajax form or the first move.

Answer 3

It looks like your code updates progress only once after 2000 milliseconds. This line:

 setTimeout(updateProgress, 2000); 

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

 myVar=setInterval(updateProgress,2000); 

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

 clearInterval(myVar); 

Note that I had to add the variable myVar. It is necessary for the clearInterval function and must be available for operation. You may need to define it globally as var myVar .

Answer 4

Please check this out .

The setTimeout function is delayed for a specified period of time, and then starts the execution of the specified function. As soon as the function caused the completion of setTimeout.

The setInterval function is also delayed for the specified time before initiating the execution of a specific function. Where does it differ that after starting this function the command will not be completed. Instead, it waits again for the specified time, and then starts again and again this process of running the function at the specified intervals until the web page is unloaded or the clearInterval function is called.

Answer 5

Following @HungryCoder answer you only miss one thing. You must return false from the form view.

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

Without returning false, the form will still do what it naturally does. In addition, you can capture the send event variable.

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

Calling e.preventDefault() also prevent this form from e.preventDefault() to the activity defined by the browser (i.e., sending to the server).