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();
}

1. 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.

2. 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.

3. 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.

Answer 1

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();
        });

}