I need to wait until all my ajax functions are done, and then continue the exectution.
My particular case is that I need to translate some fields in a form before submitting it. I translate them with an ajax call to an external site. Depending on some values in the form i would need to do more or less translations. When all the translations are done (if any) I have to validate the form with ajax, and if its valid, then submit.
This is my aproach:
First, I have a function that sends the ajax call and do stuff with the data received:
function translate(...) {
$("#ajaxCounter").val(parseInt($("#ajaxCounter").val()) + 1);
$.ajax({
...
success:function(data) {
...
$("#ajacCounter").val(parseInt($("#ajaxCounter").val()) - 1);
}
});
Then, when the form is to be submitted I execute the following code:
$("#form").submit(function() {
translatable_fields.each(function() {
translate(...);
});
while (parseInt($("#ajaxCounter").val()) > 0) { null; }
if (!(this).hasClass('ready')) {
$.ajax({
//validation
success: function(data) {
if (data['isValid']) {
$("#form").addClass('ready');
$("#form").submit();
}
}
});
}
return true;
});
The problem is that the while loop in the submit function never ends.
If I execute the code without the while loop I can see the ajaxCounter input increasing when the translation functions start and decreasing when they end.
You can achieve this in a much neater fashion using the deferred objects returned from a $.ajax call. First you should get the translate() function to return the deferred:
function translate(...){
return $.ajax({
// settings...
});
});
Then you can put all those promises in to a single array:
var requests = [];
translatable_fields.each(function(){
requests.push(translate(...));
});
Then you can apply that array to $.when:
$.when.apply($, requests).done(function(schemas) {
console.log("All requests complete");
// do something...
});
You can do this using deferred objects, but you do not need to use $.when.apply with an array if you are only interested in the final completion.
Instead you can chain parallel promises using the pattern promise = $.when(promise, another promise)
Change your translate to return the Ajax promise:
function translate(...) {
...
return $.ajax({
...
});
}
and your promise loop simply becomes:
var promise; // Start with an undefined promise - which is the same as a resolved promise for $.when
translatable_fields.each(function() {
promise = $.when(promise, translate(...));
});
// Wait for all promises to complete
promise.done(function(){
// now do the final code after all the ajax calls complete
});
Notes:
This does create an extra promise per call to $.when, but the overhead is very small and the resulting code is quite simple.
No, you can't just loop like this: the callbacks would never get a chance to be called.
I would do something like this:
function translateAllFields(done) {
var requestsInProgress = 0, doneCalled = false;
translatable_fields.each(function () {
++requestsInProgress;
$.ajax({
//...
success: function (data) {
//...
$("#ajacCounter").val(parseInt($("#ajaxCounter").val()) - 1);
}
}).always(function () {
if (--requestsInProgress === 0) {
done();
doneCalled = true;
}
});
});
if (requestsInProgress === 0 && !doneCalled) {
// in case translatable_fields was empty
done();
}
}
and then:
$("#form").submit(function (e) {
if (!(this).hasClass('ready')) {
e.preventDefault();
e.stopPropagation();
translateAllFields(function() {
$.ajax({
//validation
success: function (data) {
if (data['isValid']) {
$("#form").addClass('ready');
$("#form").submit();
}
}
});
});
}
});
You can use callback
function translate(..., callback) {
$.ajax({
...
success:function(data) {
...
callback(data);
}
});
};
And pass your after ajax code to it
$("#form").submit(function() {
translatable_fields.each(function() {
translate(..., function(result){
if (!(this).hasClass('ready')) {
$.ajax({
//validation
success: function(data) {
if (data['isValid']) {
$("#form").addClass('ready');
$("#form").submit();
}
}
});
}
return true;
});
});
});
Related
I have two nested functions like this:
var userhascompany;
$(document).ready(function(){
checkforcompany();
if (Object.keys(localStorage).length > 0) {
getaddjobcache();
}
});
The checkforcompany(); function looks like this:
$.ajax({
url: 'addjob_companycheck.php',
success: function(dataresponse) {
userhascompany = dataresponse;
}
});
The function getaddjobcache(); should only get called, when the variable userhascompany has a value or rather the ajax request has finished.
Modify checkforcompany() to return the jqXHR created by $.ajax(), since it implements the thenable interface. I recommend using jQuery 3.x for consistent promise behavior, but if you must use an older version, you can usually get away with wrapping it in a call to Promise.resolve() in order to coerce the behavior to that of a compliant promise.
function checkforcompany () {
return $.ajax({
url: 'addjob_companycheck.php'
});
}
$(() => {
checkforcompany().then(dataresponse => {
const userhascompany = dataresponse;
if (Object.keys(localStorage).length > 0) {
getaddjobcache(userhascompany);
}
});
});
Also don't rely on global variables in order to pass values between contexts. Make getaddjobcache() accept userhascompany as a parameter instead, as shown above.
Lastly, $() is recommended by jQuery instead of $(document).ready().
There are two approaches for this one is using callback functions other is using .then block or async-await
Using Callback function
var userhascompany;
$(document).ready(function(){
checkforcompany();
});
function checkforcompany(){
$.ajax({
url: 'addjob_companycheck.php',
success: function(dataresponse) {
userhascompany = dataresponse;
if (Object.keys(localStorage).length > 0) {
getaddjobcache();
}
}
});
}
Using promise .then
var userhascompany;
$(document).ready(function(){
checkforcompany()
.then(function(dataresponse){
userhascompany = dataresponse;
if (Object.keys(localStorage).length > 0) {
getaddjobcache();
}
})
});
function checkforcompany(){
return new Promise(function(resolve, reject){
$.ajax({
url: 'addjob_companycheck.php',
success: function(dataresponse) {
resolve(dataresponse)
}
error: function(err) {
reject(err)
}
});
})
}
Using jQuery ajax .done
var userhascompany;
$(document).ready(function(){
checkforcompany()
.done(function(dataresponse){
userhascompany = dataresponse;
if (Object.keys(localStorage).length > 0) {
getaddjobcache();
}
})
});
function checkforcompany(){
return $.ajax({
url: 'addjob_companycheck.php',
});
})
}
I have a javascript code which have to request the database (ajax). But I discovered that the inserts were wrong but with the right sql request. So I added an alert on which ajax request to know when the code is executed.
Here is the code :
$.post("/kohana-v3.3.5/ajax/update_simulation", {
id_simulation: id_simulation,
nom_simulation: nom_simulation,
sol_simulation: sol_simulation,
station_simulation: station_simulation,
iteration_simulation: iteration_simulation,
scenario_simulation: scenario_simulation
}
, function (result) {
console.log(result);
alert('update');
});
$.post("/kohana-v3.3.5/ajax/delete_pousses", {id_simulation: id_simulation}, function (result) {
console.log(result);
alert('delete');
});
$(this).prev('div').find('table .formRows').each(function (i) {
alert('here');
if (cpt % 2 == 1) {
//interculture
var $tds = $(this).find('td option:selected'),
culture = $tds.eq(0).val(),
date = $tds.eq(1).text();
itk = null;
} else {
//culture
var $tds = $(this).find('td option:selected'),
culture = $tds.eq(0).val(),
itk = $tds.eq(1).val();
date = null;
}
$.post("/kohana-v3.3.5/ajax/insert_pousses", {
id_simulation: id_simulation,
culture: culture,
date: date,
itk: itk,
rang: cpt
}, function (result) {
console.log(result);
alert('insert');
}); //Fin du post
cpt++;
}); //Fin du each
Each time I run that code, the order of the alert is always different ! Sometimes "insert update delete", sometimes "update, delete insert" ...
And it's a problem because if the delete is the last one, the insert will be removed. So, is it a normal way ? How should I resolve it ?
javascript can be executed asynchronously - and that's the reason why your ajax requests are not always executed in the same order. You can set them asnyc false (like here jQuery: Performing synchronous AJAX requests) or make something like promises (https://api.jquery.com/promise/) to wait for the ajax call to be finished.
greetings
AJAX requests are asynchronous, so you cannot guarantee an order if you trigger them as siblings like this.
In order to guarantee a fixed order, you need to make the subsequent call from the success block of its predecessor. Something like this:
$.post('/ajax/method1', { params: params },
function(result) {
$.post('/ajax/method2', { params: params },
function(result) {
$.post('/ajax/method3', { params: params },
function(result) {
});
});
});
You can use .promise to "observe when all actions of a certain type bound to the collection, queued or not, have finished."
https://api.jquery.com/promise/
Example Function
function testFunction() {
var deferred = $.Deferred();
$.ajax({
type: "POST",
url: "",
success: function (data) {
deferred.resolve(data);
}
});
return deferred.promise();
}
Calling Function
function CallingFunction()
{
var promise = testFunction();
promise.then(function (data) {
//do bits / call next funtion
}
}
Update
This may also help you out:
"Register a handler to be called when all Ajax requests have completed."
https://api.jquery.com/ajaxStop/
$(document).ajaxStop(function () {
});
Final note:
As of jQuery 1.8, the use of async: false is deprecated, use with $.Deferred.
you need to call post ajax method after by the success of previous one.
like:
$.post("/kohana-v3.3.5/ajax/update_simulation", {
id_simulation: id_simulation,
nom_simulation: nom_simulation,
sol_simulation: sol_simulation,
station_simulation: station_simulation,
iteration_simulation: iteration_simulation,
scenario_simulation: scenario_simulation
}
, function (result) {
console.log(result);
alert('update');
dleteajax();
});
function dleteajax()
{
$.post("/kohana-v3.3.5/ajax/delete_pousses", {id_simulation: id_simulation}, function (result) {
console.log(result);
alert('delete');
});
}
Having a really hard time with this issue, and I know $.when() can be used like so (with multiple AJAX statements) to promise you when they have all finished.
http://jsfiddle.net/M93MQ/
$.when(
$.ajax({ url: '/echo/html/', success: function(data) {
alert('request 1 complete')
}
}),
$.ajax({ url: '/echo/html/', success: function(data) {
alert('request 2 complete')
}
})
).then( function () { alert('all complete'); });
But this only works with raw $.ajax(), is there anyway to have this same functionality with function calls, that in turn have the ajax inside them (and other random logic) ?
Pseudo-code idea:
// The functions having the AJAX inside them of course
$.when(ajaxFunctionOne, ajaxFunctionTwo).then(function () {
alert('all complete');
});
Sure, have the function return a promise object.
function ajaxFunctionOne() {
return $.ajax(...)
}
function ajaxFunctionTwo() {
var dfd = $.Deferred();
// on some async condition such as dom ready:
$(dfd.resolve);
return dfd.promise();
}
function ajaxFunctionThree() {
// two ajax, one that depends on another
return $.ajax(...).then(function(){
return $.ajax(...);
});
}
$.when(ajaxFunctionOne(),ajaxFunctionTwo(),ajaxFunctionThree()).done(function(){
alert("all complete")
});
I currently have the following code:
function render(url1, url2, message) {
utility.messageBoxOpen(message);
$.getJSON(url1, function (items) {
// Do something
utility.messageBoxClose();
});
$.getJSON(url2, function (items) {
// Do something
});
}
When the function is executed a modal window appears to inform the user something is loading. Initially I only had one $getJSON request so when the request was done the modal window closed as per the code above.
I am looking to add another $getJSON request but want to close the modal window only when both $getJSON requests have completed.
What is the best way of achieving this?
You're looking for $.when()
All jQuery ajax requests (including shortcuts like getJSON) return deferred objects which can be used to control other actions.
var dfd1 = $.getJSON(url1, function (items) {
// Do something
});
var dfd1 = $.getJSON(url2, function (items) {
// Do something
});
$.when(dfd1, dfd2).then(function(){
//both succeeded
utility.messageBoxClose();
},function(){
//one or more of them failed
});
If you don't care whether the getJSONs come back successfully or not and instead only care that they are done you can instead:
$.when(dfd1, dfd2).done( utility.messageBoxClose );
A variable
function render(url1, url2, message) {
utility.messageBoxOpen(message);
var isOneDone = false;
$.getJSON(url1, function (items) {
// Do something
if(!isOneDone)
isOneDone = true;
else
utility.messageBoxClose();
});
$.getJSON(url2, function (items) {
// Do something
if(!isOneDone)
isOneDone = true;
else
utility.messageBoxClose();
});
}
You can replace the getJSON() call to one using $.ajax which accomplishes the same thing but gives you more flexibility:
$.ajax({
url: http://whatever,
dataType: 'json',
async: false,
data: {data},
success: function(data) {
// do the thing
}
});
Note the async:false part - this makes the code execution pause until the request is completed. So you could simply make your two calls this way, and close the dialog after the second call is completed.
function render(url1, url2, message) {
utility.messageBoxOpen(message);
$.when($.getJSON(url1, function (items) {
// Do something
utility.messageBoxClose();
}), $.getJSON(url2, function (items) {
// Do something
})).then(function () {
//Both complete
});
}
jQuery.when
I'm using defer's .done to wait for a cookie to be loaded before the function finishes. When I try to run the code it finishes and returns undefined. It seems like .done is firing before the first code can finish.
function getCookie(cookieName){
var value;
var defer = new jQuery.Deferred();
fetchCookie().done(
function(){
return value;
}
);
function fetchCookie(){
chrome.cookies.get(
{
'url':'https://addictedtogether.com/',
'name':cookieName
},
function(data){
console.log(data);
value=data.value;
}
);
return defer.promise();
}
}
//usage
var username=getCookie('username');
Deferred objects won't let you avoid callbacks. You still would need to be doing something like this (assuming everything is implemented correctly):
getCookie('username').then(function(username){
console.log(username);
});
It will just generate unneeded overhead. I would rather simply do:
function getCookie(cookieName, callback){
chrome.cookies.get(
{
'url':'https://addictedtogether.com/',
'name':cookieName
},
function(data){
console.log(data);
value=data.value;
if(callback) {
callback(value);
}
}
);
}
//usage
getCookie('username', function(username){
console.log(username);
});