Javascript function completing before callback completed

Question

I'm looking for some help with the following...

I have an expenses form where the user can enter their mileage claim and any other expenses occurred. The mileage rate is banded so for example if you travel between 0-9 miles you get a flat fee of £5, 10-19 miles you get £7, 20-20 £9 etc.

I have a subtotal div that I want to update whenever the mileage value is changed but my function that calculates the subtotal seems to be performing before the AJAX call to get the pricing band completes.

The subtotal function is basically:

function calculateClaim() {
    var mileageDistance = document.getElementById('journeyMileage').value;
    var expenseAmount1 = document.getElementById('expenseAmount1').value;
    var expenseAmount2 = document.getElementById('expenseAmount2').value;
    var expenseAmount3 = document.getElementById('expenseAmount3').value;
    if (mileageDistance != "") {
        calculateMileage = calculateMileageTotal(mileageDistance, function() {
            var mileageTotal = this;
            if (mileageTotal == '') {
                $("#mileageTotal").val(0.00);
                $("#journeyAmount").html('<strong>&pound;0.00</strong>');
                showDialog('alert','OK','','There is no mileage payment set up.','');
            } else {
                mileageTotal = parseFloat(mileageTotal).toFixed(2);
                $("#mileageTotal").val(mileageTotal);
                $("#journeyAmount").html('<strong>&pound;' + mileageTotal + '</strong>');
            }
        });
    } else {
        mileageTotal = 0;
        mileageTotal = mileageTotal.toFixed(2);
        document.getElementById('journeyAmount').innerHTML = '<strong>&pound;</strong>';
    }
    /* 
        SOME VALIDATION STUFF HERE FOR OTHER EXPENSE FIELDS
    */  
    subTotalCost = parseFloat(mileageTotal) + parseFloat(expenseAmount1) + parseFloat(expenseAmount2) + parseFloat(expenseAmount3);
    subTotalCost = subTotalCost.toFixed(2);
    document.getElementById('subTotal').innerHTML = '<strong>&pound;' + subTotalCost + '</strong>';
}

And the calculateMileageTotal function that is called is as follows:

function calculateMileageTotal(mileage,callback) {
    var mileageDistance = mileage;
    var mileageTariffExists = $('#mileageTariffExists').val();
    if (mileageTariffExists == 1) {
       $.ajax({
            type: "POST",
            url: "./ajaxQueries.cfc?method=getExpensesMileageBand",
            data: ({
            competitionID: $("#compID").val(),          
            matchDate: $("#matchDate").val(),
            mileageTotal: mileageDistance
            }),
            dataType: "xml",
            success: function(xml) {
                $(xml).find('field').each(function(){
                    //alert((new XMLSerializer()).serializeToString(xml));
                    var mileageTotal = $(this).find('string').text();
                    callback.call(mileageTotal);
                });
            }
        });
    } else {
        showDialog('alert','OK','','There is no Mileage Rate available.','');
    }
}

The getExpensesMileageBand function is definitely working as it should and returning the mileage rate but it is the sub total calculation that thinks the mileageTotal value is empty because it has not returned from the function yet but if I put a couple alerts in then it works (as it slows the function down).

Anyone got any ideas? I've not used callbacks before so I'm not sure if that is where I'm going wrong?

Answer 1

Why not have the subtotal calculation as a separate function which is called either from the end of the callback, or the end of the else statement.

function calculateSubtotal(milageTotal) {
  subTotalCost = parseFloat(mileageTotal) + parseFloat(expenseAmount1) + parseFloat(expenseAmount2) + parseFloat(expenseAmount3);
  subTotalCost = subTotalCost.toFixed(2);
  document.getElementById('subTotal').innerHTML = '<strong>&pound;' + subTotalCost + '</strong>';
}

if (mileageDistance != "") {
  calculateMileage = calculateMileageTotal(mileageDistance, function() {
    var mileageTotal = this;
    if (mileageTotal == '') {
      // existing code
    } else {
      // existing code
      calculateSubtotal(milageTotal);
    }
  });
} else {
  // existing code
  calculateSubtotal(milageTotal);
}