jQuery variables and $.post

Question

I'm having trouble with some code. I'm using console.log() to output the variables contents but it seems like $.post() is taking to long thus my variable isn't being set properly. Here is my code.

$.tmsmm = { 
    duplicate_meeting : "something"
}; 
$.post("scripts/check_duplicate_meetings.php", { meeting_date: meeting_date, meeting_type: meeting_type }, function(data) {
    $.tmsmm.duplicate_meeting = data;
    console.log("myVar: " + $.tmsmm.duplicate_meeting);
});

console.log("myVar2: " + $.tmsmm.duplicate_meeting);

What's outputted:

myVar2: something
myVar: this is ajax data!

As you can see, myVar2 is being logged before myVar. How do I get around this?

UPDATE: The reason this solutions suited my situation best vs calling a function upon success or completion using $.post is that i have a lot of code that comes after this sample that is dependent upon the variables value. I only logged the value 2 different times to troubleshoot why my variable wasnt set outside of the $.post function. Thank you all for your help!

riku · Accepted Answer · 2011-06-24 14:11:49Z

2

$.tmsmm = { 
    duplicate_meeting : "something"
}; 
$.post("scripts/check_duplicate_meetings.php", { meeting_date: meeting_date, meeting_type: meeting_type }, function(data) {
    $.tmsmm.duplicate_meeting = data;
    console.log("myVar: " + $.tmsmm.duplicate_meeting);
    console.log("myVar2: " + $.tmsmm.duplicate_meeting);
});

Put the myVar2 in the $.post callback function to display it after myVar.

answered Jun 24, 2011 at 14:11

riku

7634 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rolling stone Over a year ago

+1 that's what i had in my answer too. seems like the simplest and most effective solution.

Chris Laplante · Accepted Answer · 2011-06-24 14:11:07Z

1

The post request happens asynchronously. So after you issue the post request, execution immediately jumps to the console.log at the bottom. You need to handle any response in a callback.

answered Jun 24, 2011 at 14:11

Chris Laplante

29.7k18 gold badges110 silver badges137 bronze badges

Comments

rolling stone · Accepted Answer · 2011-06-24 14:12:16Z

1

Put your myvar 2 code within a success function for $.post. That way you ensure its only run if $.post was successful.

You can see an example here: http://api.jquery.com/jQuery.post/

answered Jun 24, 2011 at 14:12

rolling stone

13.1k9 gold badges49 silver badges63 bronze badges

Comments

Gijs · Accepted Answer · 2011-06-24 14:13:33Z

1

$.post is asynchronous. The callback will run whenever the server returns something, and not before. The console.log is directly after it, and will run synchronously, before the server has returned a response.

You can either move your console.log code into the callback, or use $.ajax and set the async option to false. The latter option is crazy and you should basically never do it, because the browser will freeze (completely!) until your server has responded. See: http://api.jquery.com/jQuery.ajax .

answered Jun 24, 2011 at 14:13

Gijs

5,2401 gold badge29 silver badges42 bronze badges

Comments

Shef · Accepted Answer · 2011-06-24 14:25:04Z

1

Try

var checkDuplicateMeetings = $.post("scripts/check_duplicate_meetings.php", { meeting_date: meeting_date, meeting_type: meeting_type }, function(data) {
    $.tmsmm.duplicate_meeting = data;
    console.log("myVar: " + $.tmsmm.duplicate_meeting);
});

checkDuplicateMeetings.complete(function(){
   console.log("myVar2: " + $.tmsmm.duplicate_meeting); 
});

For context, I am demonstrating it here with the complete event. However, you can use success or error events as you see fit. Listening for a complete event will ensure your code will be the last bit to run after the request has been made successfully or with errors. If you want to check and run a specific code for success or fail, listen for a success or error event accordingly.

edited Jun 24, 2011 at 14:25

answered Jun 24, 2011 at 14:14

Shef

45.6k15 gold badges82 silver badges91 bronze badges

Comments

Darcy · Accepted Answer · 2011-06-24 14:12:16Z

0

You can force the ajax call to be synchronous by using $.ajax and using the async property. However, this can cause the browser to hang and should be avoided.

http://api.jquery.com/jQuery.ajax/

However, that defeats the purpose of using ajax in the first place. Your example doesn't make a whole lot of sense. Why exactly do you need to check duplicate_meeting before you get a return?

answered Jun 24, 2011 at 14:12

Darcy

5,36812 gold badges55 silver badges79 bronze badges

2 Comments

Bojangles Over a year ago

+1 - Just what I was going to write. To the OP, do note that some browsers may hang or stop rendering until the now synchronous request is complete.

Shef Over a year ago

Why set it to async if you can listen for a complete or success event?

Kevin Bowersox · Accepted Answer · 2011-06-24 14:12:43Z

0

Your second call to console.log() is going to complete first every time. The first call will happen upon successful completion of the ajax call and the execution context will happen so quickly that the second call will happen first.

answered Jun 24, 2011 at 14:12

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Comments

Bojangles · Accepted Answer · 2011-06-24 14:15:42Z

-1

Try changing check_duplicate_meetings.php to just have

<?php echo 'hi'; ?>

for instance,

Then you can see if it is an error in your PHP file. The variable 'data' won't get loaded I think if the php file has an error occurring.

If it does have an error, try running check_duplicate_meetings.php and set the variables manually in the beginning of the file to test it.

edited Jun 24, 2011 at 14:15

Bojangles

102k50 gold badges175 silver badges209 bronze badges

answered Jun 24, 2011 at 14:13

scott

1,0701 gold badge9 silver badges21 bronze badges

1 Comment

Bojangles Over a year ago

This isn't a problem with the PHP - the $.post request is sent asynchronously, meaning that any code after it won't wait for the server to return data; it will just carry on.

Collectives™ on Stack Overflow

jQuery variables and $.post

8 Answers 8

1 Comment

Comments

Comments

Comments

Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

Comments

Comments

Comments

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related