Контекст: создание ajax тяжелой страницы, которая изменяет значения в разных селекторах в зависимости от того, что было выбрано предыдущими селекторами. Работа над созданием опции «повторного заполнения» на основе предыдущих записей.
При изменении селектора 1 выполняется вызов ajax, который заполняет оба селектора 2 и 3. Параметры селектора 1 никогда не меняются.
Когда вы «повторно заселяете» предыдущую запись, код начинается с изменения значения селектора 1, а затем активирует событие изменения в селекторе 1.
function repopulateFromEntry(event) {
// We want the children of the parent TR.
// <tr>
// <td>...</td>
// ...
// <td><button></td>
// <tr>
let td_list = event.target.parentElement.parentElement.children;
$('#selector1').val(td_list[0].innerHTML);
$('#selector1').change();
// Do other things that rely on prior to be finished
// Problem is here.
};
Событие изменения селектора 1 выглядит следующим образом.
async function executeAjax(url, success) {
return await $.ajax({
url: url,
type: "GET",
success: success
});
}
$('#selector1').change(async function(e) {
await executeAjax('api/selector2' + $("#selector1").val(), function() {
// Set selector2 from ajax data
});
await executeAjax('api/selector3' + $("#selector1").val(), function() {
// Set selector3 from ajax data
});
});
После того, как параметры селекторов установлены на основе значения selector1, он затем входит и выбирает правильное значение для селекторов 2 и 3.
Моя проблема в том, что повторный выбор значений для селекторов 2 и 3 вызывается до того, как параметры будут полностью заполнены селекторами, что приведет к сбою повторного выбора.
Мне явно не хватает чего-то в разделе async / await / ajax, чтобы сохранить его от продолжения без выполнения обоих вызовов, но я не понимаю, в чем моя проблема.