CODEWITHSUNDEEP
javascriptjquery
Geldhart
Geldhart

Reputation: 43

Updating a third field after getting ajax updates to two others

I have a form with 3 elements (Qty, UnitCost, and TotalPrice) that are calculated based on the results of other data earlier in the form.

Qty and UnitCost are filling in properly based on a jquery Get, however the Total Price, which I am just using plain old javascript doesn't update unless I make a change in earlier fields (after which it does update correctly).

I am still VERY new to jquery and am teaching myself as I go, so I am likely missing something.

The Form looks like this

A (Text), B (Dropdown), C(dropdown), Qty, UnitCost, TotalPrice

//Get the unit cost
$.get("calcCost.php", {item:item}, function(data) {
    document.getElementById(unitCostField).value = data;
});
unitCost = document.getElementById(unitCostFiled).value;

The code for Qty is essentially the same - just the fields and php script are alerted. Both are working correctly.

However, when I try to calculate the TotalPrice (which is just Qty*UnitCost) it's not updating right away. It starts out as 0 - which is expected when either Qty or Unit Cost is not filled in yet.

//Total Cost
cost = unitCost * qty
document.getElementById(costField).value = cost;

(The variables inside document.getElementById are already defined elsewhere);

Any ideas?

Upvotes: 0

Views: 176

Answers (2)

igoratron
igoratron

Reputation: 134

You need to remember that A in AJAX stands for asynchronous which means that the result of an AJAX request will not be available immediately for you to use. Instead, the browser will execute the request, finish everything else that you have on your call stack and only then, providing your request returned a response by that time, will your ajax success execute.

The example you have provided is even more interesting because your cost calculation routine needs to run after both Qty and UnitCost requests finish, and only if both of them were successful. I believe the best solution to a problem like this, especially that you are already using jquery, are Deferred objects.

The jquery docs for $.when (which is the method you might want to consider using) show a solution to an almost exactly the same problem as yours. However, for the sake of convenience (error handlers omitted for brevity):

var calcCostReq = $.get("calcCost.php", {item:item}).done(function(data) {
    document.getElementById(unitCostField).value = data;
    unitCost = document.getElementById(unitCostFiled).value;
});
var qtyReq = $.get("qty.php").done(function(data) {
    //whatever you need to do when qty was successful
});
$.when(calcCostReq, qtyReq).done(function() {
    cost = unitCost * qty
    document.getElementById(costField).value = cost;
}

Upvotes: 1

Seain Malkin
Seain Malkin

Reputation: 2303

You are retrieving the unitCostField value before it has been populated by the AJAX request. Even though the unitCost assignment is below the $.get method, it will still execute before the AJAX request has finished.

Code that relies on a AJAX request must be handled inside the callback function.

var qty;

function calcCost() {
    var unitCost = document.getElementById(unitCostField).value,
        cost = unitCost * qty;
    document.getElementById(costField).value = cost;
}

$.get("calcCost.php", {item:item}, function(data) {
    document.getElementById(unitCostField).value = data;
    calcCost();
});

Upvotes: 0

Related Questions