Question

I can’t figure out why my global variable workRegionCode is not set properly.

In function getWorkRegion(), after getting ajax callback, it attempt to set workRegionCode global variable. (inside of function setFirstIndexWorkRegionCode() ).

The alert in setFirstIndexWorkRegionCode() outputs expected value like 401 or 123 etc.

But then when getMachines() is called, the global variable workRegionCode is undefiend 🙁

This js starts from window.onload()

(please ignore those Japanese JSON key value and few Japanese variables. They are harmless)

Code:

    var workRegionDropdown = document.getElementById("workRegionDropdown");;
    var machineDropdown = document.getElementById("machineDropdown");

    //this is the global variable with problem.....
    var workRegionCode;

    //INIT
    window.onload = function() {

        getWorkRegions();

       // alert("before: " + window.workRegionCode);

        getMachines();

      //  alert("after: " + window.workRegionCode);
    }

    function addWorkRegionToDropdown(jsonObject, dropdown) {
        for(var i=0, j=jsonObject.length; i<j; i++) {
            var option = document.createElement("option");
            option.text = jsonObject[i].作業区コード + ":" + jsonObject[i].作業区名漢字;
            option.value = jsonObject[i].作業区コード;
            dropdown.options.add(option);
        }
    }

    function addMachineToDropdown(jsonObject, dropdown) {
        for(var i=0, j=jsonObject.length; i<j; i++) {
            var option = document.createElement("option");
            option.text = jsonObject[i].機械名;
            option.value = jsonObject[i].機械名;
            dropdown.options.add(option);
        }
    }


    function getMachines() {

        //!!!!!!!!!!! workRegionCode is undefined.. why?!?!?!  

        alert("inside of getMachines() ==> " + window.workRegionCode);

        var ajaxRequest = new XMLHttpRequest();
        ajaxTimeout = setTimeout(function() {timeoutAjax(ajaxRequest, "showMessage")}, "5000");

        ajaxRequest.onreadystatechange = function() {
            if(ajaxRequest.readyState == 4  ) {
                clearTimeout(ajaxTimeout);
                switch ( ajaxRequest.status ) {
                    case  200:
                                var jsonOut = JSON.parse(ajaxRequest.responseText);
                                addMachineToDropdown(jsonOut.機械, machineDropdown);
                                break;
                    default:

                                document.getElementById("showMessage").innerHTML = ajaxRequest.responseText;
                }
            }
        }


        var aMonthAgo = new Date();
        with(aMonthAgo) {
            setMonth(getMonth() - 1)
        }
        aMonthAgo = aMonthAgo.getYYYYMMDD();
        var 終了日 = "29991231";

        var url = "../resources/machine/list/" + window.workRegionCode + "/" + aMonthAgo + "/" + 終了日;
        ajaxRequest.open("GET", url, true);
        ajaxRequest.send(null)
    }




    function getWorkRegions() {
        var ajaxRequest = new XMLHttpRequest();
        ajaxTimeout = setTimeout(function() {timeoutAjax(ajaxRequest, "showMessage")}, "5000");

        ajaxRequest.onreadystatechange = function() {
            if(ajaxRequest.readyState == 4  ) {
                clearTimeout(ajaxTimeout);
                switch ( ajaxRequest.status ) {
                    case  200:
                                var jsonOut = JSON.parse(ajaxRequest.responseText);

                                //set global variable workRegionCode
                                setFirstIndexWorkRegionCode(jsonOut);

                                addWorkRegionToDropdown(jsonOut.作業区, workRegionDropdown);
                    default:

                                document.getElementById("showMessage").innerHTML = ajaxRequest.responseText;
                }
            }
        }

        var url = "../resources/workshop/list";
        ajaxRequest.open("GET", url, true);
        ajaxRequest.send(null)
    }//end getWorkRegions()

    function setFirstIndexWorkRegionCode(jsonString) {

        //here I set the value to work region code!
        window.workRegionCode = jsonString.作業区[0].作業区コード;
        alert("作業区コード: " + window.workRegionCode);

     }

Answer 1

The “A” in AJAX stands for asynchronous. This means that the AJAX call is fired off and the rest of the code keeps executing. It doesn’t wait for the response. That would be a synchronous call. If getMachines() depends on the response to getWorkRegions(), you should do something like this:

window.onload = function() {

    getWorkRegions();

}


getWorkRegions() {

...
    if (ajaxRequest.status == 200) {

        ...
        var jsonOut = JSON.parse(ajaxRequest.responseText);
        setFirstIndexWorkRegionCode();
        addWorkRegionToDropdown();

        getMachines();
        ...
    }

...

}