We Keep Coding

How to know when all the ajax calls in JQuery each loop are completed?

I am having an each loop in JQuery in which I trigger an ajax request. I want to display one success message after all the ajax calls are done executing.
My code goes below,
$('.container input:checked').each(function() {
json_data = $(this).parent().parent().find('.case_json').html()
$.ajax({
type: "POST",
url: "/some_action",
data: { json_data : json_data },
success: function(data) {
console.log('saved')
}
})
}).promise().done( function(){ $('#import_message').show().addClass('alert alert-success').html('Data imported successfully!') } );
But the problem with the code is my success message is getting displayed way before the ajax calls are done executing.
What am I doing wrong? Or do I need to change the way I implemented?

You need to combine usage $.map function with $.when, here is how it should look like:
$.when.apply($, $('.container input:checked').map(function() {
json_data = $(this).parent().parent().find('.case_json').html()
return $.ajax({
type: "POST",
url: "/some_action",
data: { json_data : json_data },
success: function(data) {
console.log('saved')
}
})
}))
.done( function(){
$('#import_message').show().addClass('alert alert-success').html('Data imported successfully!')
} );
Map function would create an array of deffereds, this array is passsed to $.when function, the problem is that it's doesn't support array as argument, but support any number of parameters, so we can use .apply() which take array of promises and pass to function as arguments.

I think you want to build an array of promises then use $.when.apply. There is a similar problem here: What is cleanest way to turn Array of JQuery Promises into a JQuery Promise of an Array?.

Using JSON data retrieved via AJAX in separate function

Apologies if this is a duplicate question, I've followed some steps from another question which didn't seem to help me. I am trying to retrieve some JSON data, store part of the data into a variable and use that variable in a separate function outside of the AJAX request.
My expected response from the json data is http://localhost:8000/tutorials/retrieve/?page=2 (This response shows if I log the variable inside of the AJAX code) however the actual response I get when I try to log the variable from another function is as follows:
n.Event {originalEvent: MouseEvent, type: "click", timeStamp: 1436727171161, jQuery21304066238570958376: true, toElement: div#loadmore.recentTutorials…}
Here is the current code
var recentFirstPage = '';
function retrieveTutorials(){
$.ajax({
type: "GET",
url: "/tutorials/retrieve",
dataType: "json",
success: function(data){
**some unrelated parsing code here**
//Set the variable to what I need
recentFirstPage = data.next_page_url;
},
error: function() {
alert("An error occurred processing AJAX request.");
}
});
}
$('#main-content-wrap').on('click', '.recentTutorials', function(recentFirstPage){
//Does not return expected result
console.log(recentFirstPage);
});
When I click .recentTutorials I expect the console to log the data from JSON however it doesn't. Can someone help clear up my error(s)?

The reason that it doesn't log the data from JSON s that the call is asynchronous. This means that the function will execute top to bottom without waiting for the call to finish.
One method that's used is to leverage deferred objects which return a promise on completion. You can accept an anonymous function to the invoker function so that it's call back is executed within the scope of the click.
Observe:
function retrieveTutorials(){
return $.ajax({
type: "GET",
url: "/tutorials/retrieve",
dataType: "json"
});
}
$('#main-content-wrap').on('click', '.recentTutorials', function(){
//store our function call as an ajax promise
var promise = retrieveTutorials();
//wait for the ajax to return so we can mutate the data
promise.done(function(data){
//now our data will be properly
recentFirstPage = data.next_page_url;
});
});

It seems to me that you are trying to log the data before the ajax is completed. It`s better to use deferreds . Try this:
function retrieveTutorials(){
return $.ajax({ // will return deferred object
type: "GET",
url: "/tutorials/retrieve",
dataType: "json",
success: function(data){
**some unrelated parsing code here**
//Set the variable to what I need
recentFirstPage = data.next_page_url;
},
error: function() {
alert("An error occurred processing AJAX request.");
}
});
}
$.when( retrieveTutorials() ).done(function ( data ) {
console.log(recentFirstPage);
});

The parameter in your click handler is the last and final nail in your coffin. It's always the jquery event and you shouldn't handle it at all.
You do need to call the retrieveTutorials() function within the handler and you need to pass it a callback function that will be executed on success. So your retrieveTutorials() function will look something like this:
function retrieveTutorials(success){
$.ajax({ type: "GET", url: "/tutorials/retrieve",
dataType: "json",
success: success,
error: function() { alert("An error occurred processing AJAX request.");
} }); }
And your click handler:
$('#main-content-wrap').on('click', '.recentTutorials', function(){
retrieveTutorials(function(data){
console.log(data.next_page_url);
});
});
You can also use all the promise based goodness in the other anwers, but the above would be an idiom you'll see again and again.

How to handle simultaneous ajax responses using single ajax method?

Method for handling ajax
function ajaxMethod(){
return $.ajax({
url: ajaxUrl,
type: "POST",
dataType: "JSONP",
jsonpCallback: ajaxCallback
});
}
Calls to this method:
dD(ajaxMethod());
aA(ajaxMethod());
bB(ajaxMethod());
cC(ajaxMethod());
aa,bb,cc,dd method have
promise.success(function (response) {
console.log(response);
});
Now aA response is coming in bB function,,bb response in cc function and as simultaneous call is coming.
Also tried using async true nothing happens.
Any suggestions?

With jsonpCallback you are telling jQuery to use a specific function name for the callback function (instead of generating a unique one), so each time you call it, you overwrite the previous function.
Just remove jsonpCallback: ajaxCallback.
While you are at it, remove type: "POST",, it is incompatible with JSONP.

I think this is what you are after.
This code is using the returned promise to wait for the result then passing the result to your other function.
ajaxMethod().success(function(response)
{
dD(response);
});
ajaxMethod().success(function(response)
{
aA(response);
});
ajaxMethod().success(function(response)
{
cC(response);
});
ajaxMethod().success(function(response)
{
dD(response);
});
Your aA, bB, cC and dD methods can now be:
function <insertname>(response)
{
console.log(response);
}

If you want your request to come in the synchronous way, then try the following :
var callBack = $.Callbacks();
callBack.add(dD(ajaxMethod()));
callBack.add(aA(ajaxMethod()));
callBack.add(bB(ajaxMethod()));
callBack.add(cC(ajaxMethod()));
callBack.fire();
the above line of code will make sure the respective ajax call would get call.

Multiple each and ajax requests

so this is my setup: I am calling a .each on a number of elements and after a few checks I send an ajax request with some JSON data and on success I apply the server response as an attribute to each element(it is usually an id). After that I push the id to an array.
The problem is that obviously ajax requests are asynchronous and the function that uses the array of element ids fires before all ajax have had time to finish.
I've tried with .when and .then but the callback function keeps getting fired way ahead of the ajax.
Here is how my code looks( I've removed some unnecessary parts):
var order = [];
function sub(selector){
selector.each(function(){
var out = {
"some":"random",
"stuff":"here"
};
$.ajax({
type: "POST"
url: "/test/url",
dataType: 'json',
contentType: "application/json; charset=utf-8",
data:JSON.stringify(out),
success:function(response){
$(this).attr("data-response",response);
order.push(response);
}
})
})
}
$("#button").click(function(){
$.when(sub($(".test"))).then(function() {
console.log(order);
//i have to run the sub function twice so the order doesn't return undefined
});
});

The problem is that when acts on deferred objects, however sub doesn't return anything so when fires right away. So what you need to do is to collect all the deferred objects returned by the ajax calls and return them:
var order = [];
function sub(selector){
var deferredList = []
selector.each(function(){
var out = {
"some":"random",
"stuff":"here"
};
var deferred = $.ajax({
type: "POST",
url: "/test/url",
dataType: 'json',
contentType: "application/json; charset=utf-8",
data:JSON.stringify(out),
success:function(response){
$(this).attr("data-response",response);
order.push(response);
}
})
deferredList.push(deferred)
})
return deferredList;
}
$("#button").click(function(){
$.when.apply($,sub($(".test"))).then(function() {
console.log(order);
//i have to run the sub function twice so the order doesn't return undefined
});
});
The reason to use apply and not when directly is that when doesn't accept array of objects as a parameter and apply provides us the work-around for this.

The argument to $.when() should be a Deferred, but sub() doesn't return anything. This version returns an array of all the Deferreds returned by $.ajax, and calls $.when with them all as arguments; it will then wait for all of them.
var order = [];
function sub(selector){
return selector.map(function(){
var out = {
"some":"random",
"stuff":"here"
};
return $.ajax({
type: "POST"
url: "/test/url",
dataType: 'json',
contentType: "application/json; charset=utf-8",
data:JSON.stringify(out),
success:function(response){
$(this).attr("data-response",response);
order.push(response);
}
})
})
}
$("#button").click(function(){
$.when.apply(this, sub($(".test"))).then(function() {
console.log(order);
//i have to run the sub function twice so the order doesn't return undefined
});
});

Your approach produces a whole lot of more server requests and will scale terribly. Since you want to wait for all results anyway, a much better solution would be to collect all data and send only one ajax request which returns an array of results for each data object.
Using a deferred object (as seen in other answers) then gives you the ability to use that result in a when statement.

try to use a callback-function in success:
var order = [];
function sub(selector, callback){
selector.each(function(){
var out = {
"some":"random",
"stuff":"here"
};
$.ajax({
type: "POST"
url: "/test/url",
dataType: 'json',
contentType: "application/json; charset=utf-8",
data:JSON.stringify(out),
success:function(response){
$(this).attr("data-response",response);
order.push(response);
callback();
}
})
})
}
$("#button").click(function(){
sub($(".test"), function() { console.log(order) });
});

Add attribute async : false to your $.ajax - call. Then the calls are made in sequence after eachother.

Javascript: call a specific function on function complete

I have a slow function that does an AJAX request:
function X(param1,param2){
var params={
type: "POST",
url: "./ajax/useful.php",
data: "param1="+param1+"&param2="+param2,
success: function(msg){
//do something
}
};
var result=$.ajax(params).responseText;
}
Everything works fine when I call X("asdf","qwerty").
Now, what I want to do is to be able to call function X as follows:
function X(param1,param2,function(){alert('hi');}){
var params={
type: "POST",
url: "./ajax/useful.php",
data: "param1="+param1+"&param2="+param2,
success: function(msg){
/////
//I want to be able call the function in the 3rd parameter (alert in this case)
/////
}
};
var result=$.ajax(params).responseText;
}
Now you might say why don't I just call alert('hi') directly inside the success. Sure I can do this, but I want to be able to vary what goes on inside the called function (not just a simple alert('hi'), depending on who's calling X.

You declare your X function like this:
function X(param1,param2,callback){
...use the callback like this:
success: function(msg){
callback();
}
...and call X like this:
X('a', 'b', function(){alert('hi');});
This works because your success handler is a closure over the data within your X function, including its arguments. It has a live reference to that information (even after X returns), and so later when the Ajax call completes, it can still use the callback argument. More on closures here: Closures are not complicated

function X(param1,param2,f){
var params={
type: "POST",
url: "./ajax/useful.php",
data: "param1="+param1+"&param2="+param2,
success: function(msg){
f();
}
};
var result=$.ajax(params).responseText;
}
should work.
You can no call X like this:
X(param1,param2,function(){dowhatever})