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.
Related
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?
I am having a problem, or perhaps a lack of understanding, with the jQuery execution order of $.get() function. I want to retrieve some information from a database server to use in the $.ready() function. As you all know, when the get returns, it passes the data to a return handler that does something with the data. In my case I want to assign some values to variables declared inside the ready handler function. But the problem is, the return handler of $.get() does not execute until after ready has exited. I was wondering if (a) am I doing this right/is there a better way or if (b) there was a way around this (that is, force the get return handler to execute immediately or some other fix I'm not aware of). I have a feeling this is some closure thing that I'm not getting about JavaScript.
As per request, I'll post an example of what I mean:
$(function() {
var userID;
$.get(uri, function(returnData) {
var parsedData = JSON.parse(returnData);
userID = parsedData.userID;
});
});
So as you can see, I'm declaring a variable in ready. Then using a get call to the database to retrieve the data needed. Then I parse the JSON that is returned and assign the userID to the variable declared before. I've tested it with a couple alerts. An alert after the get shows userID as undefined but then an alert in get's return handler shows it to be assigned.
$.get() is asynchronous. You have to use a callback to fill your variable and do the computation after the request is complete. Something like:
$(document).ready(function(){
$.get( "yourUrl", function( data, textStatus, jqXHR ) {
var myData = data; // data contains the response content
// perform your processing here...
registerHandlers( myData ); // you can only pass "data" off course...
});
});
// your function to register the handlers as you said you need to.
function registerHandlers( data ) {
// registering handlers...
}
$.get is an ajax request. A in AJAX stand for asynchronous, so script won't wait for this request to finish, but instead will proceed further with your code.
You can either use complete callback or you can use $.ajax and set async to false to perform synchronous request.
The $.get() function executes an async httprequest, so the callback function will be executed whenever this request returns something. You should handle this callback outside of $.ready()
Maybe if you explain exactly what do you want to do, it would be easier to help!
Are you looking for something like:
$(document).ready(function(){
var variable1, variable 2;
$.get('mydata.url', function(data){
variable1 = data.mydata1;
variable2 = data.mydata2;
});
});
If you declare the variables first, then you can set their values within the get call. You can add a function call at the end of the get handler to call a separate function using these values? Without some kind of example, its hard to go into any more detail.
Without seeing the full code, my guess is that you should declare your variable outside $.ready; initialize it in ready for the initial page load; then update it from the get callback handler.
for example
var x = ""; // declaration
$(document).ready(function() { x = "initial value"; });
$.get(...).success(function() { x = "updated from ajax"; });
I have one of those pesky variable scope problems with $.post. Before submitting a form, I want to first check if the user has edited the content. I return false if the user hasn't.
I've looked at a bunch of different examples on Stackoverflow and the general way to do this is to create a function and a callback function inside that function to handle the callback. My problem is that the when I call getReturned below, the callback does not get implemented (know this because form gets submitted and I've tried an alert). Btw, alert("No changes were made so text was not submitted."); gets called successfully.
What am I doing wrong?
function getReturn(callback, id, old_variable){
var return_value = "ERROR";
$.post('myURL', {"id" : id},
function(data) {
var text_from_server = $.trim(data[0].note_text);
if (old_variable == text_from_server){
alert("No changes were made so text was not submitted.");
return_value = false;
callback(return_value);
} else {
return_value = true;
callback(return_value);
}
},
"json"
);
};
var id = 123;
var old_variable = "foo";
getReturn(
function(return_value){return return_value;/*alert("SUCCESS!");*/},
id,
old_variable
);
Since you are making an asynchronous request to test if the value has changed you have to always return false from your submit handler. In the callback, if the form was edited, you would then manually submit the form using form.submit(). Something like this:
getReturn(
function(return_value) {
if (return_value) {
$("#myForm").submit();
}
},
id,
old_variable);
return false;
You don't understand asynchronous execution. You can not return anything from $post! Do not forget that. All you can do is trigger execution of something - you can try to set a variable flag, but it won't help you. You also need to trigger the execution of a function that does something with that flag, and you have to call that function from inside $post.
The function you are sending in as the callback returns a value. But it does not return the value to anyplace. You are calling it inside $post, and it's returning the value inside $post - which does nothing useful for you at all since you aren't doing anything with the return value.
I would tell you how to change it, except you have not said what you want to do with this return value.
Below is some code I'm having trouble with. Basically, I'm defining an empty array as a global variable (var playlist = []) and then trying to add elements to it within a jQuery $.get call. From what I've read on the internet, I should be able to do this! The following code gives the error: "Cannot call method 'play' of undefined". playlist[0] does get set within the function, alerting playlist[0] within the $.get call gives the expected result, but it doesn't persist outside the function.
var playlist = [];
function playArtist(artist){
$.get('media/songs/' + artist,
function(data){
for (var i in data){
playlist[i] = setSong(data[i].Resource.name,'track' + data[i].Media.id,i + 1);
}
$('#track-total').text(parseInt(playlist.length));
},'json'
);
playlist[0].play();
}
Can anyone help?
Thanks!
You don't have to do any of this. I ran into the same problem with my project. what you do is make a function call inside the on success callback to reset the global variable. As long as you got asynchronous javascript set to false it will work correctly. Here is my code. Hope it helps.
var exists;
//function to call inside ajax callback
function set_exists(x){
exists = x;
}
$.ajax({
url: "check_entity_name.php",
type: "POST",
async: false, // set to false so order of operations is correct
data: {entity_name : entity},
success: function(data){
if(data == true){
set_exists(true);
}
else{
set_exists(false);
}
}
});
if(exists == true){
return true;
}
else{
return false;
}
Hope this helps you .
Chances are, playlist is getting used before $.get returns - as ajax calls are asynchronous. It works within the success callback because that gets fired once the request has completed, so it will contain the data you expect.
.get is asynchronous, hence the need to provide a callback function. While your get is still in process you are trying to use the array, probably before it's actually been populated.
This is probably really stupid but i can't find the problem with my code. It fetches a url that returns json and the function is then supposed to return a string:
function getit() {
var ws_url = 'example.com/test.js';
var user = false;
$.getJSON(ws_url, function(data) {
alert('user '+data.user);//shows john
user = data.user || false;
});
return user;//should return john but returns false
}
test.js will have something like this:
{"id":"12","username":"ses","user":"john","error":""}
or like this:
{"error":"123"}
I also tried if (data.user) {} else {} but it didn't work either..
So what am i missing?
Thanks :)
The problem comes from the fact that the $.getJSON() call is asynchronous. Once the ajax request is fired off, processing continues on inside getit(), and your function immediately returns false. Later on, the Ajax response returns and sets user, but your getit() function returned a long time ago!
You can force the Ajax call to be synchronous using the async option, like this:
$.ajax({
async: false,
url: ws_url,
type: "GET",
success: function(data) {
alert('user '+data.user);//shows john
user = data.user || false;
}
});
If you do that, your browser will block on the script until the Ajax call returns. Generally this isn't the ideal behaviour (which is why the default is async: true), so I'd suggest reworking whatever it is that's calling getit(), and have it expect to process it's results whenever it can, perhaps by passing it's own callback function to getit() that would then be executed when getit() is done.
Ajax is asynchronous, which means that the rest of the script isn't going to sit around and wait for it to finish before moving on. As in your example, the return line is being reached before the ajax function receives a response from the server, thus the user variable is still false at that point in time.
If you want to force an ajax call to run synchronously, you can use jQuerys $.ajax method and set the async parameter to false.
$.ajax({
url:ws_url,
dataType:"json",
async:false,
success:function(data){
alert('user '+data.user);//shows john
user = data.user || false;
}
});