Forcing JavaScript to execute in desired order

Question

I have an issue when trying to get Javascript to execute functions in my desired order. I'm trying to get a jQuery modal form to load information based on a certain selection. I have two SELECT boxes that need to be loaded, but the contents of the second SELECT box depend entirely on the selected value of the first SELECT box.

I made the following functions to request the information I need:

function get_Subjects(varID, callback){
    $.post("../vars/get_SID.php", { vid : varID },  
        function(result){
            getInfo('tbsubjectdiv', '../vars/findSubjectlist.php?sid='+result);
        });
    callback();
}

function get_Selectedfields(varID, callback){
    $.post("../vars/requestTblock.php", { vid : varID },  
        function(result){
            populateForm('tbWiz', result);
            document.form_tbWiz.varname.disabled = true;
            $('.trSearch').hide();
            $('.trValueset').hide();
        });
    callback();
}

function get_TextblockType(varID, callback){
    $.post("../vars/requestVtype.php", { vid : varID },  
        function(result){
            if(result == 0){ //Opzoeken
                $('.trSearch').show();
            }else if(result == 1){ //Datum vergelijken
                $('.trSearch').show();
                $('.trValueset').show();
            }else if(result == 2){ //Percentage
                //
            }
        });
    callback();
}

The first function checks the MySQL database for the selected value of the FIRST SELECT field, and loads the results into the second SELECT field.
The second function requests the rest of the rest of the form data, and populates the form using populateForm(). It also hides certain parts of my form in preparation for function three.
The third function basically requests which parts of the form have to be displayed, because that's not always the same.

The whole idea behind this is that I want to use populateForm() to populate all of the form fields. In order for populateForm() to properly set the selected SELECT option, the particular SELECT field must first contain the OPTION it needs to select. Makes sense. I try to make sure of this with my first function, which will load all of the OPTIONs. THEN I try to use the get_Selectedfields() to populate all the proper values. This is not what happens though. No matter what I try to do, getInfo() in the first function is ALWAYS being called LAST. This makes it impossible for populateForm() to select the proper option, which is driving me mad.

I'm trying to "force" the execution-order by doing this:

function getTextblock(var_ID){
get_Subjects(var_ID, function() {
    get_Selectedfields(var_ID, function() {
        get_Textblocktype(var_ID, function() {
            // Done
        });
    });
});

}

When I realised it still did not work the way I wanted, I decided to use Chrome's Developer Tools to check the order in which everything is executed. It all works as expected, but at the very end it jumps straight back to getInfo(), which is part of the FIRST function I called. I'm absolutely clueless as to why getInfo() gets executed last. If this just gets executed at the very beginning, where I want it to execute, it would all work fine.

Pascal Rosin · Accepted Answer · 2012-01-10 14:02:05Z

3

You have to call the callback in the callback function of the post request:

function get_Subjects(varID, callback){
    $.post("../vars/get_SID.php", { vid : varID },  
        function(result){
            getInfo('tbsubjectdiv', '../vars/findSubjectlist.php?sid='+result);      
            callback();
        });

}

function get_Selectedfields(varID, callback){
    $.post("../vars/requestTblock.php", { vid : varID },  
        function(result){
            populateForm('tbWiz', result);
            document.form_tbWiz.varname.disabled = true;
            $('.trSearch').hide();
            $('.trValueset').hide();
            callback();
        });

}

function get_TextblockType(varID, callback){
    $.post("../vars/requestVtype.php", { vid : varID },  
        function(result){
            if(result == 0){ //Opzoeken
                $('.trSearch').show();
            }else if(result == 1){ //Datum vergelijken
                $('.trSearch').show();
                $('.trValueset').show();
            }else if(result == 2){ //Percentage
                //
            }
            callback();
        });

}

answered Jan 10, 2012 at 14:02

Pascal Rosin

1,55616 silver badges27 bronze badges

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

4 Comments

Wesley Over a year ago

Works, but isn't reliable at all. On average it works 10% of the time. I guess it still doesn't actually wait for getInfo() to finish before continuing, which would be caused by the async factor.

Pascal Rosin Over a year ago

yes, I did not realize, that getInfo looks like it makes ajax requests as well. getInfo() would need to take a callback function. Then you could do: getInfo('tbsubjectdiv', '../vars/findSubjectlist.php?sid='+result, callback);

Wesley Over a year ago

Yup, getInfo(div, url) uses getXMLHTTP to get content from the url in the url parameter and puts it into the provided div. I think my thought-process is much more complicated at the moment than it should be. How exactly do I implement the callback function in getInfo()? I don't think simply jamming "callback" into the parameter line is enough, right? I guess this shows that I've only been working with JavaScript for like 2 days.

Wesley Over a year ago

Figured it out, thanks for your help! Ended up putting "callback" into the getInfo() parameter line, and made sure to call the callback as soon as the getXMLHTTP results have been obtained.

David Brainer · Accepted Answer · 2012-01-10 13:58:40Z

1

The POST is being handled asynchronously in your functions so your "callback" is really just being executed almost immediately after your initial call, whereas the callback of $.post is being executed after the post has occurred. Does that help you sort things out? You will probably need to kick off the rest of the process in the callback of $.post("../vars/get_SID.php", { vid : varID }...

$.post is shorthand for $.ajax so you can read up a bit more in the jQuery docs, but I would not suggest switching to synchronous requests. If you absolutely must have one request finished before the next can execute then kicking off that next step from the callback is the way to go.

answered Jan 10, 2012 at 13:58

David Brainer

6,3513 gold badges21 silver badges16 bronze badges

Comments

nobody · Accepted Answer · 2012-01-10 14:00:01Z

1

You're using ajax. The first a is for asynchronous. If you called the functions from the function(result) blocks then they would occur in order.

Alternatively (and this isn't a great idea but you can do it) use the $.ajax() object and set async to false.

answered Jan 10, 2012 at 14:00

nobody

2692 silver badges3 bronze badges

Comments

Chapter2 · Accepted Answer · 2012-01-10 14:00:15Z

1

As you don't know how long long an ajax request will actually take, you can only chain events within the ajax response:

function getTextblock(var_ID){
    $.post(YOUR_TARGET, YOUR_DATA, function(result){
        YOUR_CODE
        // CHAIN HERE, call new function or sub ajax request
    });
}

answered Jan 10, 2012 at 14:00

Chapter2

1025 bronze badges

1 Comment

Wesley Over a year ago

I want to try this, but it seems like I'll have to make it so that getInfo() allows me to execute something based on a result, right?

Beccari · Accepted Answer · 2012-01-10 14:17:06Z

Wesley,

The javascript will execute always on the predefined order. If you put a bunch of "alerts()" in the middle of your code, you can taste that.

But this is not true for callbacks, because they will be moved to the bottom of execution stack on javascript where we can't determine the order, since they are called by a AJAX return which by definition is asynchronous.

Even though your ajax executes in a millisecond, the callback will not be executed until all methods in your script block have finished.

You have, actually three options:

Chain all the methods sequence in callbacks. Please, don't call a callback!! It inst supposed to be you, but the "system" that will call those.

  // The data you need first
  function myStartPoint() {
    $.post(url, function(result) {
       // do what you need with this result (this is your callback, but anonymous)
       // then, call the next step
       secondPoint();
    });
  }

  function secondPoint() {
    $.post(url, function(result) {
      // again, the callback is anonymous... your hardly need to declare something named callback
      // chain how many points as you need
      nextPoint();
    }
  }

"Force" the ajax to be synchronous with async:false option. This can cause performance issues.
The ugliest of all is to use the damned setTimeout which is very, very wrong, but will work in your case because, the setTimeout will put the method on the bottom of execution stack even after those callbacks which are expected to be fast. Seriously, I just put this option because eventually someone would say it... Do not take this path.

Collectives™ on Stack Overflow

Forcing JavaScript to execute in desired order

5 Answers 5

4 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related