</div>
</div>
<div class="grid--cell mb0 mt4">
<a href="/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call" dir="ltr">How do I return the response from an asynchronous call?</a>
<span class="question-originals-answer-count">
(38 answers)
</span>
</div>
<div class="grid--cell mb0 mt8">Closed <span title="2014-04-14 10:07:06Z" class="relativetime">6 years ago</span>.</div>
</div>
</aside>
i have the following validate script to run before the form is submitted:
function validateMyForm(){
var numberTo = $('.to').length
$('.to').each(function(){
var product_id = $(this).closest('tr').find('input').get(0).id;
var todate = $(this).val();
var from = $(this).prev().prev().val();
$.ajax({
type: 'POST',
url: myBaseUrl + 'Products/ajax_change_date',
dataType: 'json',
data: {
id: product_id,
todate: todate,
from: from
},
success: function (data) {
numberTo--;
}
});
});
while(numberTo != 0){
}
return true;
}
However when i run this i get a message box in firefox saying its waiting for the script to complete.
How do i avoid that while still keeping the ajax?
</div>
Using:
while(numberTo != 0){
}
You create infinity loop and your scrip stop executing. This is why you get this error on Firefox.
You will need to have callback to check numberTo variable.
For example:
function validateMyForm(){
var numberTo = $('.to').length;
function checkNumberTo() {
if( numberTo === 0 ) {
alert( 'AJAX Completed' );
// here you should include your code to manually submit the form
}
}
$('.to').each(function(){
var product_id = $(this).closest('tr').find('input').get(0).id;
var todate = $(this).val();
var from = $(this).prev().prev().val();
$.ajax({
type: 'POST',
url: myBaseUrl + 'Products/ajax_change_date',
dataType: 'json',
data: {
id: product_id,
todate: todate,
from: from
},
success: function (data) {
numberTo--;
checkNumberTo()
}
});
});
return false;
}
If you want a more elegant solution you might want to try a promise library. Here is an essay https://gist.github.com/domenic/3889970 that presents the downside of using callbacks and the solution to it - Promises. The essay is long, but it is worthy to read.
To get to how this new concept applies to you, you should try researching Promise composition, here is the first article I could find on Google on this: http://strongloop.com/strongblog/how-to-compose-node-js-promises-with-q/.
var x = 10; var promise1 = Q($.ajax(...)).then(function () { x = 20; }); var promise2 = Q($.ajax(...)) .then(function () { x = 30; });
var groupPromise = Q.all([ promise1(), promise2() ]) groupPromise.then(function (results) { }, console.error) // Kris Kowal's example
Promises l and 2 execute in paralel and one does not know which will be fulfilled first. Here are 2 relevant promise libraries: