Javascript Order Of Execution Issue

Question

I'm having an issue with Javascript executing things in an order that doesn't make sense to me.

What is happening is the following

var bValid = false;
alert(bValid + " 1");
if(validateForm() == TRUE)
{
    $.get("submit_manageUsers.php",  
        {action: sendAct, userID: userID},  
        function(responseText)
        {  
            if(responseText == "GOOD")
            {
                alert("Update Successful");
                bValid = true;
                alert(bValid + " 2");
            }
            else
            {
                alert(responseText + "\n Update Unsuccessful");
                bValid = false;
            }
        },  
        "html"  
    );     
    bvalid = true;
    alert(bValid + " 3");
}
alert(bValid + " 4");
if(bValid == true)
{
    //do something
}
alert(bValid + " 5");

EDIT: added a bit more of what is actually happening in case it helps, probably will knowing how I do things!

The output from the above code looks like this:

false 1

false 2

false 4

false 5

true 3.

The problem here is that the if(bValid == true) is being executed before the if(validateForm() == TRUE) so this means bValid is always false.

Why is that part of the code executing before the other part?

Any help on this is greatly appreciated!

TRUE is what the function validateForm() should return to set the bValid variable to TRUE as well. — Adam
– Adam, Commented Aug 30, 2011 at 16:15
Please create a jsfiddle.net which produces this output. If TRUE is not defined, the code will just fail and does not produce any further output. If it is defined, the output will be different. From my point of view, the order of output is impossible. — Felix Kling
– Felix Kling, Commented Aug 30, 2011 at 16:15
Oh.......the alert(bValid + " 2") is in your ajax callback function!!!! — xdazz
– xdazz, Commented Aug 30, 2011 at 16:28
@Adam: You could just follow the link and have a look ;) But now that you added more information, the problem is clear. — Felix Kling
– Felix Kling, Commented Aug 30, 2011 at 17:07

Kris Krause · Accepted Answer · 2011-08-30 16:46:48Z

1

Javascript is case sensitive. validateForm（） returns a bool right? So its either true or false. TRUE is not the same as true.

if (validateForm（） == true) { // do something. }

I would even go one step further and use strict equals:

if (validateForm（） === true) { // do something. }

Also, bvalid is not the same as bValid.

In the future I would suggest utilizing one of the numerous javascript tools out there to help find syntax errors (such as jsfiddle, jslint, jsbin, etc.). We all make mistakes, and sometimes these little simple details cause big headaches. There is not a compiler crutch (like I use everyday with C#) for javascript although YUI and Google have syntax checking tools to help.

Google - http://code.google.com/closure/

Yahoo! - http://developer.yahoo.com/yui/

After more information was provided in the original question -

You are making an asynchronous call to your PHP page that may take 1 second or 30 seconds.

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

JQuery ajax (which powers the .get function) is asynchronous by default. However, you can override this and make synchronous.

edited Aug 30, 2011 at 16:46

answered Aug 30, 2011 at 16:12

Kris Krause

7,3162 gold badges25 silver badges26 bronze badges

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

3 Comments

Adam Over a year ago

i wish this was a syntax error, but i just rushed when typing the question out, all variables are spelled the same in the real code, i think this has to do with the jQuery .get and how that runs, but not entirely sure how that works!

Kris Krause Over a year ago

I want to see that validateForm() function.

Kris Krause Over a year ago

You are making an asynchronous call to your PHP page that may take 1 second or 30 seconds.

James Johnson · Accepted Answer · 2011-08-30 16:13:30Z

0

You don't need to specify true or false on those conditions. Try something like this and see if it resolves your issue:

var bValid = false; 
alert(bValid + " 1"); 

if (validateForm()) { 
    bvalid = true; 
    alert(bValid + " 2"); 
} 

alert(bValid + " 3"); 
if (bValid) {
    //do something 
} 

alert(bValid + " 4");

answered Aug 30, 2011 at 16:13

James Johnson

46.1k8 gold badges75 silver badges111 bronze badges

Comments

Simon Arnold · Accepted Answer · 2011-08-30 16:27:59Z

0

var bValid = false;
alert(bValid + " 1");

if(validateForm() == TRUE){
    bvalid = true;
    alert(bValid + " 2");
}
alert(bValid + " 3");

setTimeout(function() { // Continue le script après l'insertion du html
    if(bValid == true){
        //do something
    }
    alert(bValid + " 4");
}, 0);

This way, the first part of your script should be done before it start the second validation. Hope this help.

answered Aug 30, 2011 at 16:27

Simon Arnold

16.2k8 gold badges70 silver badges89 bronze badges

Comments

Jimmy · Accepted Answer · 2011-08-30 17:22:45Z

$.get is asynchronous. This means you send the message, you hang up the phone, and you wait for jQuery to call you back when it's done with submit_manageUsers.php. Step 3 and Step 4 are done after you hang up the phone, but step 2 only happens after the callback is called, which may be a while. That is why your messages are out of order.

$.get(url, data, function(response) { 
    if (response == 'GOOD') {
       alert('success!');
       DoSomethingMeaninfulHere();
    } else {
       alert(response + "\n Update Unsuccessful");
    }
});

you have to put the call to

// DoSomethingMeaningfulHere
alert(bValid + " 4");
if(bValid == true)
{
    //do something
}
alert(bValid + " 5");

inside of the callback for it to be executed at the correct time (which is after the AJAX request completes)

Collectives™ on Stack Overflow

Javascript Order Of Execution Issue

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related