So say i have multiple ajax requests that are fired at the same time through a parent function. Each ajax function has a seperate individual completion function which are unrelated to each other. If i want a further function to execute upon completion of all ajax functions, but after the completion functions specified in each individual ajax function, how would i go about this?
function ajax1(str) {
return $.ajax({
type: 'get',
data: "q=" + str,
url: 'foo.php',
success: function (result) {
//success!
}
},
complete: function (data) {
function ajaxcomplete1();
},
)
};
function ajax2(str) {
return $.ajax({
type: 'get',
data: "q=" + str,
url: 'foo.php',
success: function (result) {
//success!
}
},
complete: function (data) {
function ajaxcomplete2();
},
)
};
function ajaxcall() {
ajax1();
ajax2();
}
function allajaxcomplete() {
// some code to be executed on completion of all ajax requests but after individual "ajaxcomplete1" and "ajaxcomplete2" functions
}
ajaxcall();
allajaxcomplete();
$.ajax returns a jQuery Deferred object (a promise). You then just have to use $.when to call a function when all those promises are resolved:
function ajax1(str) {
return $.ajax({
type: 'get',
data: "q=" + str,
url: 'foo.php',
success: function (result) {
//success!
ajaxcomplete1();
}
});
};
function ajax2(str) {
return $.ajax({
type: 'get',
data: "q=" + str,
url: 'foo.php',
success: function (result) {
//success!
ajaxcomplete2();
}
});
};
function ajaxcall() {
// store the promises (for clarity, you also could call the functions directly in the when)
var d1 = ajax1(),
d2 = ajax2();
// this function will be called only when both promises d1 and d2 are resolved
$.when(d1, d2).done(function(result1, result2){
// do stuff when both functions are done
// result1 and result2 are the result of the ajax calls inside your functions
allajaxcomplete();
});
}
Related
This is my code:
function updateCharts() {
for (var i = 0; i < charts.length; i++) {
updateChart(charts[i]);
}
sortQueues();
}
function updateChart(chart) {
$.ajax({
type: "POST",
async: true,
data: '{id: ' + chart.Id + '}',
url: "foo/getData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var parsedResponse = JSON.parse(response.d);
insertChartData(chart, parsedResponse);
},
failure: function (response) {
console.Log(response);
}
});
}
How can I run sortQueues() function after all charts are updated? Right now sortQueues() function is executed before insertChartData is finished (because ajax calls), and charts aren't sorted in html. Of course I don't want to have sync calls.
$.ajax returns a promise so you can capture them and use them with Promise.all.
First return the promise:
function updateChart(chart) {
return $.ajax({
then replace your loop with map so you get all the promises in an array.
var promises = charts.map(updateChart);
Then you can use the promise:
Promise.all(promises).then(array_of_results => {
// all ajax requests recieved at this point
});
I've already read this article How do I return the response from an asynchronous call? However I couldn't come up with a solution.
I'm doing an ajax request
function getdata(url)
{
console.log('Started');
jQuery.ajax({
type: "GET",
url: "http://myserver.com/myscript.php",
dataType: "json",
error: function (xhr) {
console.log('Error',xhr.status);
},
success: function (response) {
console.log('Success',response);
}
});
}
And Console displays everything fine but when I say
var chinese = getdata();
to get the data. I keep getting:
Uncaught TypeError: Cannot read property 'length' of undefined error for this line
var text = chinese[Math.floor(Math.random()*chinese.length)];
Can anybody help me here?
The problem is that you are using an asynchronous method expecting a synchronous result.
Therefore you should use the code in the result of the asynchronous call like the following:
function getdata(url) {
console.log('Started');
jQuery.ajax({
type: 'GET',
url: url,
dataType: 'json',
error: function(xhr) {
console.log('Error', xhr.status);
},
success: function(chinese) {
var text = chinese[Math.floor(Math.random()*chinese.length)];
// Do something else with text
}
});
}
getData('http://myserver.com/myscript.php');
I hope it helps :)
The error you get is because of the asynchronous nature of the call. I suggest you to assign the value after you get the success response from the API like below.
var chinese = getdata();
Then the function getdata() will be like
function getdata(url)
{
console.log('Started');
jQuery.ajax({
type: "GET",
url: "http://myserver.com/myscript.php",
dataType: "json",
error: function (xhr) {
console.log('Error',xhr.status);
},
success: function (response) {
initChinese(response.data);
}
});
}
And create a function initChinese() like
var text;
function initChinese(chinese){
text = chinese[Math.floor(Math.random()*chinese.length)];
}
You can also declare the text variable in global scope and then assign the value to text variable inside the success function without having to create a new function initChinese.
The problem is your getdata function does not return anything. In your getdata function you're doing a ajax request, which is an asynchronous request. So the data you're requesting won't, and can't be returned with your getdata function.
But you will have the requested data in your success function:
function getdata(url)
{
console.log('Started');
jQuery.ajax({
type: "GET",
url: "http://myserver.com/myscript.php",
dataType: "json",
error: function (xhr) {
console.log('Error',xhr.status);
},
success: function (response) {
console.log('Success',response);
var text = response[Math.floor(Math.random()*response.length)];
}
});
}
As I'm not able to test your code, you've to debug the rest on your own. But the response variable will be most likely your "chinese" variable.
You could try using callbacks or you could look at Promises.
The idea with callbacks is that you pass a function that is run after the ajax request is finished. That callback can accept a parameter, in this case the response.
Using callbacks:
function getData(url, successCallback, errorCallback) {
console.log('Started');
jQuery.ajax({
type: "GET",
url: url,
dataType: "json",
error: function(xhr) {
errorCallback(xhr.status);
},
success: function(response) {
successCallback(response);
}
});
}
var chinese;
getData("http://myserver.com/myscript.php", function(response) {
chinese = response; // you can assign the response to the variable here.
}, function(statusCode) {
console.error(statusCode);
});
Using Promises (< IE11 doesn't support this):
function getData(url) {
return new Promise(function(resolve, reject) {
console.log('Started');
jQuery.ajax({
type: "GET",
url: url,
dataType: "json",
error: function(xhr) {
reject(xhr.status);
},
success: function(response) {
resolve(response);
}
});
});
}
var chinese;
getData("http://myserver.com/myscript.php").then(function(response) {
chinese = response;
console.log(chinese);
}, function(statusCode) {
console.error(statusCode);
});
I make 2 ajax calls. Second one should be called only when the first is finished:
var deferred = $.Deferred();
firstAjaxCall();
deferred.done(function () {
secondAjaxCall();
});
function firstAjaxCall() {
$.ajax({
url: '/SomeUrl',
type: 'POST',
success: function () {
deferred.resolve();
}
});
}
function secondAjaxCall() {
$.ajax({
url: '/SomeOtherUrl',
type: 'Get',
});
}
I also tried like this (jQuery deferreds)
$.when(firstAjaxCall()).done(function() {
secondAjaxCall();
});
but no luck.
Still, in the first example, sometimes the second call gets called first, sometimes it doesn't
In the first example the flow is like this:
firstAjaxCall();
secondAjaxCall();
deferred.resolve();
why is second call called first and before deferred.resolve() ?
You have to actually return the Deferred from $.ajax to $.when to make that work
function firstAjaxCall() {
return $.ajax({
url : '/SomeUrl',
type : 'POST'
});
}
function secondAjaxCall(data_from_first) {
return $.ajax({
url : '/SomeOtherUrl',
type : 'Get',
});
}
firstAjaxCall().done(secondAjaxCall);
You can try to call secondAjaxCall() in the success function of the first one
Like this :
function firstAjaxCall() {
return $.ajax({
url: '/SomeUrl',
type: 'POST',
success: secondAjaxCall()
});
}
I'm trying to make an ajax call that gets a type of a property. Using that type I then pass it into another ajax call. I'm having some difficulty doing this asynchronously because I'm trying to defer til the first property is loaded.
function getEnt_PodType() {
var ent_PodType;
var oDataUrl = //URL to my data;
return $.ajax({
url: oDataUrl,
type: "GET",
async: true,
beforeSend: function (xhr) {
xhr.setRequestHeader("ACCEPT", accept);
},
success: function (xhr, textStatus) {
var res = xhr;
if (res.d.results != undefined) {
ent_PodType = res.d.results[0].Ent_PodType;
}
console.log("The ent pod type value is "+ ent_PodType);
return ent_PodType;
}
});
}
function getProjects() {
var QUERY_FILTER = getEnt_PodType().done(function (result) {
"$filter=Ent_PodType eq '" + result + "'";
});
var url = restUrl + QUERY_FILTER;
console.log("The url form getProjects is " + QUERY_FILTER);
return $.ajax({
url: url,
type: "GET",
async: true,
beforeSend: function (xhr) {
xhr.setRequestHeader("ACCEPT", accept);
},
success: function (xhr, textStatus) {
projects = parseODataResultTest(xhr);
return projects;
}
});
}
When I call the getProjects(), I thought building the url would wait for getEnt_PodType() to return its value but it doesn't seem to work that way.
Instead it goes ahead and executes the rest of getProjects(). Is there any way to do this asynchronously?
Your second ajax call need to be placed inside done promise. You can wrap rest of your code in local function and call it inside done, like so:
function getProjects() {
function getProjectsViaAjax(){
var url = restUrl + QUERY_FILTER;
console.log("The url form getProjects is " + QUERY_FILTER);
return $.ajax({
url: url,
type: "GET",
async: true,
beforeSend: function (xhr) {
xhr.setRequestHeader("ACCEPT", accept);
},
success: function (xhr, textStatus) {
projects = parseODataResultTest(xhr);
return projects;
}
});
}; // end of getProjectsViaAjax
var QUERY_FILTER = getEnt_PodType().done(function (result) {
"$filter=Ent_PodType eq '" + result + "'";
getProjectsViaAjax();
});
}
AJAX is asynchronous. Anything that depends on the result must be done in the callback function.
I also recommend always passing the parameters as an object, to allow jQuery to encode it properly.
function getProjects() {
getEnt_PodType().done(function (result) {
var QUERY_FILTER = { "$filter": "Ent_PodType eq '" + result + "'"};
console.log("The url form getProjects is " + QUERY_FILTER);
return $.ajax({
url: restUrl,
data: QUERY_FILTER,
type: "GET",
async: true,
beforeSend: function (xhr) {
xhr.setRequestHeader("ACCEPT", accept);
},
success: function (xhr, textStatus) {
projects = parseODataResultTest(xhr);
return projects;
}
});
});
}
The ajax call needs to be in the done promise. Something like the following should be ok.
function getProjects() {
return getEnt_PodType().done(function (result) {
var QUERY_FILTER = "$filter=Ent_PodType eq '" + result + "'";
var url = restUrl + QUERY_FILTER;
console.log("The url form getProjects is " + QUERY_FILTER);
return $.ajax({
url: url,
type: "GET",
async: true,
beforeSend: function (xhr) {
xhr.setRequestHeader("ACCEPT", accept);
},
success: function (xhr, textStatus) {
projects = parseODataResultTest(xhr);
return projects;
}
});
});
}
For this to work you need to call the second code from the success function of first code.Or you put the code in a function and call that function from the success callback of first ajax call.Using .done calllback is more appropriate.So call second function from done callback of first ajax call.
function getProjects() {
return getEnt_PodType().done(function (result) {
var QUERY_FILTER = "$filter=Ent_PodType eq '" + result + "'";
var url = restUrl + QUERY_FILTER;
console.log("The url form getProjects is " + QUERY_FILTER);
return $.ajax({
url: url,
type: "GET",
beforeSend: function (xhr) {
xhr.setRequestHeader("ACCEPT", accept);
},
success: function (xhr, textStatus) {
projects = parseODataResultTest(xhr);
return projects;
}
});
});
}
You need to call one function synchronously, because second task is depends on first task.
You can call function getEnt_PodType synchronously, you need to make
async: false in this function.
And then it will work as you expected.
Using vktemplate isn't quite working when I try to use jquery deferreds. Since the vktemplate makes an ajax call of its own, the deferred gets resolved before vktemplate completes its work, and its optional callback. How can I set up vk so that the promise doesn't get resolved until after these two things happen?
$(document).on('click', '.ajax', function() {
$.when(ajax1('<p>first</p>'),
ajax2('<p>second</p>'),
ajax3('<p>third</p>'))
.then(function(results1, results2, results3) {
console.log(results1);
$('.document').append(results1);
$('.document').append(results2);
$('.document').append(results3);
alert('all ajax done');
});
});
function ajax1(data) {
$.ajax({
type: 'post',
url: 'templates/test_template.tmpl',
data: "data=" + data,
dataType: 'json',
success: function (returnedData) {
$('#resultsDiv').vkTemplate('templates/test_template.tmpl', returnedData, function () {
//vk callback
//possibly call my resolve here?
});
}
});
}
function ajax2(data){//more of the same}
Since vkTemplate returns nothing you need to manually create a deferred and resolve it in success callback with required data.
function ajax1(data) {
var dfd = $.Deferred();
$.ajax({
type: 'post',
url: 'templates/test_template.tmpl',
data: "data=" + data,
dataType: 'json',
success: function (returnedData) {
$('#resultsDiv').vkTemplate('templates/test_template.tmpl', returnedData, function (el, data, context) {
dfd.resolveWith(context, [$(el)]);
});
}
});
return dfd.promise();
}