Обновление третьего поля после получения обновлений ajax двум другим

Question

У меня есть форма с 3 элементами (Qty, UnitCost и TotalPrice), которые рассчитываются на основе результатов других данных ранее в форме.

Qty и UnitCost заполняются должным образом на основе jquery Get, однако общая цена, которую я использую простой старый javascript, не обновляется, если я не вношу изменения в более ранние поля (после чего он корректно обновляется) ,

Я все еще ОЧЕНЬ новичок в jquery, и я учу себя как иду, поэтому я, скорее всего, что-то пропустил.

Форма выглядит следующим образом

А (текст), B (Dropdown), C (раскрывающийся) Кол-во, UnitCost, TotalPrice

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

Код Кол-во, по существу, то же самое - только появятся поля и скрипт php. Оба работают правильно.

Однако, когда я пытаюсь вычислить TotalPrice (это просто Qty * UnitCost), он не обновляется сразу. Он начинается с 0, что ожидается, когда Qty или Unit Cost еще не заполнены.

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

(Переменные внутри document.getElementById уже определены в другом месте);

Любые идеи?

Answer 1

Вы извлекаете значение unitCostField, прежде чем оно будет заполнено запросом AJAX. Несмотря на то, что назначение unitCost ниже метода $.get, оно будет выполняться до завершения запроса AJAX.

Код, который полагается на запрос AJAX, должен обрабатываться внутри функции обратного вызова.

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(); 
}); 

Answer 2

Вы должны помнить, что в AJAX означает асинхронных, что означает, что результат запроса AJAX не будут доступны сразу для использования. Вместо этого браузер выполнит запрос, завершит все остальное, что у вас есть в стеке вызовов, и только тогда, если ваш запрос вернет ответ к этому времени, будет выполнен ваш успех ajax.

Пример, который вы предоставили, еще более интересен, потому что ваша процедура расчета затрат должна быть запущена после того, как оба заканчиваются на Qty и UnitCost, и только если оба они были успешными. Я считаю, что наилучшим решением такой проблемы, особенно, если вы уже используете jquery, являются объекты с отложенным доступом.

jquery docs для $ .when (это метод, который вы, возможно, захотите рассмотреть), покажет решение почти такой же проблемы, как ваша. Однако, ради удобства (обработчики ошибок для краткости опускаем):

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; 
}