How to call another javascript function within a javascript function after previous codes have been executed?

Question

I got this seemingly simple problem, yet I cannot find the correct way of execution.

I have 2 select tags, the first one is COLOR and the second one is SIZE. The second one is dependent on the first one.

To retrieve the price of the products (which is from the database), I intend to call a function within another function. The code stated below.

    function checksizes(id)
    {
    var color=document.getElementById('colors').value;
    $("#sizediv").show();
    $("#sizediv").load('sizes.php?id='+id+'&color='+color);
    var size = document.getElementById('size2').value;
    alert(id+size+color);
    confirmprice2(id,size,color);
    }

    function confirmprice2(id,size)
    {
    $("#price").show();
    $("#price").load('price.php?id='+id+'&size='+size);
    }

The alert is to check whether the invoked values to be passed on the next function are correct.

Code is working, but returning different results. It seemed that the function checksizes() passes values which are from the previous select (from the size). It calls the second function even before it finishes executing this: $("#sizediv").load('sizes.php?id='+id+'&color='+color);

Help is much appreciated. Thank you!

Answer 1

The load function is an asynchronous function. When the function is "finneshed" does not mean that the result is loaded. You need the completed Callback for that. See http://api.jquery.com/load/

function checksizes(id)
{
    var color=document.getElementById('colors').value;
    $("#sizediv").show();
    $("#sizediv").load('sizes.php?id='+id+'&color='+color, function(){
        var size = document.getElementById('size2').value;
        alert(id+size+color);
        confirmprice2(id,size,color);
    });
}

function confirmprice2(id,size)
{
    $("#price").show();
    $("#price").load('price.php?id='+id+'&size='+size, function(){
        alert('price is loaded');
    });
}

Answer 2

That's because .load() is asynchronous. It basically forks off another thread to continue its work while the calling code continues what it was doing. If you have code which needs to happen in response to .load() then it needs to be placed in a callback function, not after the function. Something like this:

function checksizes(id) {
    var color=document.getElementById('colors').value;
    $("#sizediv").show();
    $("#sizediv").load('sizes.php?id='+id+'&color='+color, function () {
        var size = document.getElementById('size2').value;
        alert(id+size+color);
        confirmprice2(id,size,color);
    });
}

Passing this function as a parameter to .load() will invoke this function after .load() completes.

Answer 3

As from the jQuery documentation, $.load does indeed not finish before it returns. You should use the callback function:

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

http://api.jquery.com/load/

In your case, everything in the checksizes function under the load function call should be placed in the callback.