Search code examples
phpjavascriptjquerypostresponse

2 Consecutive JQuery Posts, second executed first


Please help me with this...

I have to pass values to a php file for save, but if a check box has been selected, it has to execute the second jquery post using the return value from the first. But it seems like the second jquery post is being executed first, here's my code:

if($action=="save_prod")
    {   
        var remember = document.getElementById('chk');
        var $suppid=document.getElementById('supp').value;
        var $categlist=document.getElementById('categlist').value;
        var $prodname=document.getElementById('prodname').value;
        var $proddesc=document.getElementById('proddesc').value;

        $.post(baseurl+'index.php/main/newproduct',{"categlist" : $categlist,"prodname" : $prodname," proddesc" : $proddesc,"supp" : $suppid},function(response) 
        {
        $lastid=response;
                if($lastid != 0)
                {
                    alert("Product has been saved with ID=" + $lastid);
                    document.getElementById('resp').style.display='none';
                    document.getElementById('fade').style.display='none';
                    window.location.href=baseurl +"index.php/main/mgtprods/?key="+ $suppid;
                }
            });

        if (remember.checked)
         {
            //alert($lastid);
            $.post(baseurl+'index.php/main/newitem',{"prodlist" : $lastid ,"itlist" : 0,"itcost" : 0, "supp" : $suppid, "itname" : $prodname, "itunit" : "pc" },function(response) 
            {
                document.getElementById('resp').style.display='none';
                document.getElementById('fade').style.display='none';
                //window.location.href=baseurl +"index.php/main/mgtprods/?key="+ $suppid;
            });

         }  
    }

Thank you so much!


Solution

  • jQuery ajax functions ($.ajax(), $.get(), $.post() ... ) all return a Deferred object which wraps the underlying jqXHR object.

    Take advantage of the Deferred.then() function to chain two asynchronous calls :

    //your first $.post :
    $.post(...)
    .then(function(){
        if (remember.checked) {
            //your second $.post :
            $.post(...);
        } 
    });
    

    Using it this way, the second function will be called only if the first call is succesful (nothing will be triggered if the first call results in an error).


    Your first callback contains a redirect : window.location.href=baseurl +"index.php/main/mgtprods/?key="+ $suppid;. You will have to choose more precisely when you want to execute this redirection.

    Here is a way to trigger the redirection after the second call if remember is checked, or right after the first call if remember isn't checked, by chaining Deferred objects :

    $.post(... /* remove the redirection from the first callback */)
    .then(function(){
        if (remember.checked) {
            //your second $.post : return the Deferred corresponding to this call
            return $.post(... /* remove the redirection from the second callback */);
        } else {
            // else, return the first Deferred object :
            return this;
        }
    }).then(function(){
        /* do your redirection here : */
        window.location.href=baseurl +"index.php/main/mgtprods/?key="+ $suppid;
    });
    

    fiddle