Basically I need to to return a variable from inside of a function using an ajax call.
Like so:
function returnStuff(){
$.ajax({
//do stuff
}).done(function(response){
return response;
})
return response;
}
I can't just use a variable in the done function and return that because the function will just return the undefined variable before the call completes.
Is there any way that I can return a variable through 2 layers of functions or is there a way that I can wait to return until the call is complete?
No. You cannot synchronously wait/block in JavaScript. Best you can do is something like this:
function returnStuff(){
return $.ajax({
//do stuff
}).done(function(response){
// handle some stuff
});
}
returnStuff().done(function() {
// add a 2nd event handler (called after the one above)
});
You have to rearchitect your code to not depend on getting a result back immediately.
Use jquery ajax async option. This will make the request blocking instead of asynchronous - note this can cause the UI to lock up while the request is happening, so I agree with Mark that you should change your code architecture to not require setting async false, however this does answer your question.
function returnStuff(){
var ret;
$.ajax({
async: false,
//do stuff,
success: function(response) {
ret = response;
}
});
return ret;
}
Please note there is a really good write-up explaining why you should not do this here: How do I return the response from an asynchronous call?
Related
I am trying to write a jquery plugin.
Now, I would like to use an ajax-call in one of the functions of this plugin.
However it should be chainable, meaning in this case that the ajax-call should be executed and only after something was returned, the return should happen.
I tried different things but so far I could not make it so that the second function in the chain is really executed after the return value of the ajax call was retrieved;
In this version (see below) I can use
$(document).createDatabase().message();
So, chaining works.
But looking at the console log – the message() function is executed before the ajax-call in createDatabase() is finished.
How can I make it so that
$(document).createDatabase().message();
first returns the output/return of the ajax-call that is inside createDatabase() and only after that message() is executed?
Code:
(function($) {
$.fn.createDatabase = function(options) {
// Plugin options defaults
var settings = $.extend({
name: 'NA',
onExit: function() {} // callback function
}, options);
$.ajax({
method: "POST",
url: "plugin/php/createDatabase.php",
data: settings
})
.done(function(msg) {
console.log("createDatabase executed with message: " + msg);
settings.onExit.call();
});
return this;
};
$.fn.message = function() {
console.log('this should appear after the console-log message of createDatabase');
return this;
}
}(jQuery));
Thank You!
You could do a couple of things, but they are all a bad idea. The reason is that these are two separate jQuery plugins - a plugin should be capable of working on its own. There is no guarantee or reason that somebody won't do .message().createDatabase(). If you need to guarantee the order of execution, then you should use just one plugin. One possible way would be to pass message inside options when you call .createDatabase(options), and then run message when the call is done. Like so
$(document).createDatabase({
message: function() {...}
});
...
var promise = $.ajax({
method: "POST",
url: "plugin/php/createDatabase.php",
data: settings
})
.done(function(msg) {
console.log("createDatabase executed with message: " + msg);
settings.onExit.call();
});
...
if ( settings.message )
promise.done( settings.message.bind(this) );
I tried different things but so far I could not make it so that the second function in the chain is really executed after the return value of the ajax call was retrieved;
The second function executes when the first one finishes. The first one finishes with return this, but this happens before the ajax call is done because ajax calls are asynchronous.
I know my title isn't very clear.
For example, this is the structure of my code:
if (foo == something) {
// Ajax call 1, let it be $.ajax("foo1.html") and so on
} else {
// Ajax call 2, let it be $.ajax("foo2.html") and so on
}
How would I test if $.ajax("foo1.html") has actually been run?
Please don't tell me to test if foo == something again. My actual code is much, much more complicated, so please answer the question from the view of the ajax call.
Is this possible at all?
I'm not sure if I understood you right, but jQuery will mix a Deferred object into its jXHR object and you can just check its state.
var resp = $.ajax({});
// somewhere else...
if( resp.state() === 'resolved' ) {
}
Other states are rejected and pending, see http://api.jquery.com/deferred.state/
Of course, you can get all advantages of those Deferred objects aswell, like adding more event handlers for certain things afterwards (.done(), .fail(), etc) or just wait for the promise to fullfil using $.when().
You can set a callback in your ajax call:
$.ajax({
url: "foo1.html"
}).done(function() {
alert('Done!');
});
I would set variable before AJAX call and reset it in the success callback like that :
var isRunning = true;
$.ajax({
url: url,
success: function(resp){
isRunning = false;
}
});
I had similar issues. I used this code:
var isRunning = false; // whether ajax call is running
if(isRunning==false){
isRunning = true;
$.ajax({
// do your stuff
// make sure you set
isRunning = false;
// on success
});
}
Wrap the call in a try catch.
if the call to 'foo1' fails because the method does not exist on the server, in the catch call foo two and then three all the way down until you have exhausted all your fall backs.
If you know the method exists and think it will fail, then set a status on it that can be returned if the server fails then handle the return in the ajax callback.
Sorry if this is a duplicate but I couldn't find any satisfying answers in the previous posts.
$(function() {
$.ajax({
url: 'ajax/test.html',
success: function(data) {
// Data received here
}
});
});
[or]
someFunction() {
return $.ajax({
// Call and receive data
});
}
var myVariable;
someFunction().done(function(data) {
myVariable = data;
// Do stuff with myVariable
});
The above code works just fine. However, this ajax request is made on page load and I want to process this data later on. I know I can include the processing logic inside the callback but I don't want to do that. Assigning the response to a global variable is not working either because of the asynchronous nature of the call.
In both the above ways, the 'data' is confined either to the success callback or the done callback and I want to access it outside of these if possible. This was previously possible with jQuery 'async:false' flag but this is deprecated in jQuery 1.8.
Any suggestions are appreciated. Thank you.
You can "outsource" the callback to a normal function, so you can put it somewhere, you like it:
$(function() {
$.ajax({
url: 'ajax/test.html',
success: yourOwnCallback
});
});
somehwere else you can define your callback
function yourOwnCallback(data) {
// Data received and processed here
}
this is even possible with object methods as well
This solution might not be idea but I hope it helps.
Set the variable upon callback.
Wherever you need to process the data, check if variable is set and if not wait somehow.
Try:
$(document).ready(function(){
var myVar = false;
$.ajax({
url: 'ajax/test.html',
success: function(data) {
myVar=data;
}
});
someFunction(){ //this is invoked when you need processing
while(myVar==false){}
... do some other stuff ..
}
});
Or
someFunction(){
if(myVar==false){
setTimeout(someFunction(),100); //try again in 100ms
return;
}
.. do some other stuff ..
}
I have a function which uses getJSON but its not working like I expected.
function balbla(name, param) {
$.getJSON("/blabla.json?name=" + name + "¶m=" + param, function(data) {
return data.bla;
});
}
When I use alert(data.bla) in the getJSON method it works but when I try return data.bla it doesnt. Also when I create a variable and try to write the value of data.bla to it it simply doesnt work!
// I tried this:
function getRouteData(name, param) {
return $.getJSON('/routes_js.json', {route:name, opt: param});
}
function getRoute(name, param) {
getRouteData(name, param).done(function(data) {
return data.route;
});
}
But when I call getRoute("bla", "blub") it still returns undefined.
AJAX is asynchronous. You cannot easily return a value in such a function that depends on the result of the AJAX call. Change your function to accept a callback:
function balbla(name, param, cb) {
$.getJSON('/blabla.json', {name:name, param: param}, function(data) {
cb(data.bla);
});
}
And use it like this:
balbla('foo', 'bar', function(bla) {
// do stuff
});
An even cleaner way would be returning the jqXHR object:
function balbla(name, param) {
return $.getJSON('/blabla.json', {name:name, param: param});
}
When calling it, use the deferred/promise interface of the jqXHR object to attach a success callback:
balbla('foo', 'bar').done(function(data) {
alert(data.bla);
});
Note that using $.ajax() in synchronous mode is not an option you should consider at all. It may hang the browser's UI (or at least the active tab) until the request finished. Besides that, asynchronous callbacks are the way everyone does it.
If you do not like using callback functions, you could use a preprocessor such as tamejs to generate the asynchronous functions automatically.
The function with your return statement:
function(data) {
return data.bla;
}
… is not being called by your code (it is being called deep inside jQuery), so you have no way to put an assignment of the left hand side of the function call.
It is also being called as part of an asynchronous function, so the balbla function will have finished running and returned before it the anonymous one is ever called.
If you want to do something with the response data, do it inside the anonymous callback function.
getJSON is asynchronous, not synchronous. You need to use a callback so your logic needs to be done in two steps. Calling step and the processing step.
I am making a chrome extension which sets a cookie when users log in. When I attempt to read the cookie using the chrome.cookies.get() method the callback can log the results but I cant pass it out of the callback.
function getCookie (cookieName){
var returnVal;
chrome.cookies.get({
'url':'https://addictedtogether.com/',
'name':cookieName
},
function(data){
console.log(data); //log displays returned cookie in a object
returnVal=data;
}
);
console.log(returnVal); //log says this is undefined
return returnVal;
}
I tried using a couple different ways of passing the result but it seems like the object is undefined unless it is called from within the callback.
The problem is that your callback is called after the main function returns. (The extension APIs are called asynchronous for a reason!) returnVal is undefined because it hasn't been assigned to yet. Try modifying your function to accept a callback argument:
function getCookie (cookieName, callback){
chrome.cookies.get({
'url':'https://addictedtogether.com/',
'name':cookieName
},
function(data){
callback(data);
});
}
// Use like this:
getCookie("CookieName", function(cookieData){
// Do something with cookieData
});
If you don't like passing callbacks around, you could also modify your function to return a deferred. If you have to handle a lot of asynchronous function calls, deferreds make your life a lot easier. Here's an example using jQuery.Deferred:
function getCookie (cookieName){
var defer = new jQuery.Deferred();
chrome.cookies.get({
'url':'https://addictedtogether.com/',
'name':cookieName
},
function(data){
defer.resolve(data);
});
return defer.promise();
}
// Example use:
getCookie("FooBar").done(function(data){
// Do something with data
});