Why is my response data empty in the complete function of a jquery ajax call?

Question

I have a function that fires two ajax calls when toggling a radio button. Both calls return a price and put it inside an element. The problem is when I spamclick the radiobutton, sometimes the prices differ from eachother while they should be the same, this means the ajax calls are out of synch with eachother.

I tried removing the part that appends the price from the success function to the complete function, so it only adds the result of the PHP scripts when the entire call is finished. But for some reason it won't append the price when I put it inside the complete function, why is that?

My function:

$('.checkoutwrap input[name=ontwerpcontrole]').on("change", function(e) {
    e.preventDefault();
    var productid = $(this).closest('.prodinfoleft').siblings('.prodinforight').find('.productid').val();
    var $pricediv = $(this).closest('.prodinfoleft').siblings('.prodinforight').find('.prodinfoprice');
    $.ajax({
        type:'post',
        url:"checkout/ontwerpcontrole.php",
        data:({ontwerp: ontwerp, productid: productid}),
        success:function(data){
        
        },
        complete: function(data) {
            refreshcoupon(true);
        }
      });
    $.ajax({
        type:'post',
        url:"checkout/prices.php",
        data:({productid: productid}),
        success:function(data){

        },
        complete: function(data) {
            $($pricediv).empty().append( data );
        }
    });
});

Above puts no price in $pricediv , but when I put that part in the success function like this:

$('.checkoutwrap input[name=ontwerpcontrole]').on("change", function(e) {
    e.preventDefault();
    var productid = $(this).closest('.prodinfoleft').siblings('.prodinforight').find('.productid').val();
    var $pricediv = $(this).closest('.prodinfoleft').siblings('.prodinforight').find('.prodinfoprice');
    $.ajax({
        type:'post',
        url:"checkout/ontwerpcontrole.php",
        data:({ontwerp: ontwerp, productid: productid}),
        success:function(data){
        
        },
        complete: function(data) {
            refreshcoupon(true);
        }
      });
    $.ajax({
        type:'post',
        url:"checkout/prices.php",
        data:({productid: productid}),
        success:function(data){
            $($pricediv).empty().append( data );
        },
        complete: function(data) {
            
        }
    });
});

The function used inside the first ajax call:

function refreshcoupon(force){
  $.ajax({
     type:'post',
     url:"checkout/refreshcoupon.php",
     data:({}),
     success:function(data){
         $( "body #coupon" ).empty().append( data );
     }
 });
}

It works fine (except like mentioned if you click to fast the prices are not the same). Why is this?

Answer 1

You have couple of synced and couple of sequential ajax calls. Therefor it may happen that first request is done after last one. You probably have more solutions, but simply one would be to check if your variable productid is still same in ajax success function:

$('.checkoutwrap input[name=ontwerpcontrole]').on("change", function(e) {
    e.preventDefault();
    var $ontwerp = $(this).closest('.prodinfoleft').siblings('.prodinforight').find('.productid');
    var productid = $ontwerp.val();
    var $pricediv = $(this).closest('.prodinfoleft').siblings('.prodinforight').find('.prodinfoprice');
    $.ajax({
        type: 'post',
        url: "checkout/ontwerpcontrole.php",
        data: ({
            ontwerp: ontwerp,
            productid: productid
        }),
        success: function(data) {
            if ($ontwerp.val() == productid) {
                refreshcoupon($ontwerp, productid);
            };
        }
    });
    $.ajax({
        type: 'post',
        url: "checkout/prices.php",
        data: ({
            productid: productid
        }),
        success: function(data) {
            if ($ontwerp.val() == productid) {
                $($pricediv).empty().append(data);
            };
        }
    });
});

function refreshcoupon($ontwerp, productid) {
    $.ajax({
        type: 'post',
        url: "checkout/refreshcoupon.php",
        data: ({}),
        success: function(data) {
            if ($ontwerp.val() == productid) {
                $("body #coupon").empty().append(data);
            };
        }
    });
}

Anyhow... looking at this code it does not look fine. Maybe try to do it with only one ajax call, save resources, reduce errors and debugging etc.