CODEWITHSUNDEEP
javascriptphpjqueryajax
nevetz1911
nevetz1911

Reputation: 135

Javascript doesn't update variables written with PHP

I have a javascript function that calls an AJAX, like this:

function addSquadronByID(id) {
        $.ajax
        ({
            type: "POST",
            url: "server/get_squadron.php",
            data: {
                'id': id,
                'counter': squadron_counter
            },
            cache: false,
            success: function (data) {
                squadron_counter++;
            },
            error: function () {
                alert("AJAX error.");
            }
        });
    }
}

Outside the document.ready, the variable is initialized like this var squadron_counter = 0;

This function perfectly works while I call it in the page, but if I try to use PHP to write it in the page, like this:

        $list_squadrons = $DB->Execute($query);
        while(!$list_squadrons->EOF){
            $currentSquadron_id = $list_squadrons->fields["squadron_id"];
            $currentSquadron_number = $list_squadrons->fields["squadrons"];
            echo "addSquadronByID($currentSquadron_id);\n";
            $list_squadrons->MoveNext();
        }

The function writes into the document.ready() the correct calls, but squadron_counter is always zero, even if the function works. My only idea is that it works this way because javascript calls all the functions at once and does not wait to complete the first one before executing the second one, etc.. but how do I solve this?

HTML output as requested:

addSquadronByID(3, squadron_counter);
addSquadronByID(5, squadron_counter);
addSquadronByID(6, squadron_counter);

This is put into a 

$( document ).ready(function() {
});

inside a <script> tag.

Upvotes: 1

Views: 84

Answers (1)

ghybs
ghybs

Reputation: 53350

I think your idea about JS calling all functions without waiting for the first one to complete is in the right direction. This is called "asynchronous requests". Please refer to How to return the response from an asynchronous call? for a detailed explanation.

The idea is to send your 3 requests and then wait for all of them to complete before checking the value of your squadron_counter variable (or whatever data you have updated in your success callbacks).

Then if my understanding is correct, you do not know how to implement this waiting?

Since you are using jQuery, the implementation is super simple. Note first that your jQuery.ajax request returns a Deferred object. So simply keep a reference of the Deferred object created by each AJAX request you send. Then you could use for example jQuery.when with a callback in its then method to wait for all your requests to complete:

function addSquadronByID(id) {
    return jQuery.ajax({ /* ... */ }); // returns a Deferred object.
}

var d1 = addSquadronByID(3),
    d2 = addSquadronByID(5),
    d3 = addSquadronByID(6);

jQuery.when(d1, d2, d3).then(
    // callback executed on success of all passed Deferred objects.
    function () {
        console.log(squadron_counter);
    }
);

Demo: http://jsfiddle.net/btjq7wuf/

Upvotes: 1

Related Questions