Ожидание вызова AJAX, чем диалоговое окно показа

Question

Я работаю над динамическим веб-сайтом онлайн-формы. В основной форме у меня есть несколько подформ, которые можно добавлять и удалять динамически.

<div class='subform'> 
    //form fields 
    <input ...> 
    ... 
    <button class='subform_submit'> 
</div> 

Для каждого подчиненного, я связываю вызов AJAX на кнопке отправки Подчиненной как это:

$('#main').on('click', '.subform_submit', function(){ 
    // Get this subform's user input 
    ... 
    $.ajax({ 
     url: .., 
     type: .., 
     data: /* this subform's data */ 
    }); 
}); 

Таким образом, в этой странице, я могу иметь от 0 до 10 субформов в зависимости от выбора пользователя. У меня также есть основная кнопка отправки в нижней части страницы, которая может передавать эти подформы и данные основной формы вместе.

$('#main').on('click', '#submit', function(e){ 
    $('.subform_submit').click(); // Submit each subform 
    bootbox.confirm({ }); 
}) 

После кнопки основной отправить щелкает, я хочу, чтобы показать загрузочную картинку и затем показать диалоговое окно (я использую bootbox.confirm() здесь), пока все вызовы AJAX не завершены. В этом диалоговом окне сообщается пользователю о том, что была отправлена ​​вся форма, включая подформы. Но проблема в том, что каждый вызов AJAX может занять 2 секунды, и я не знаю, как вызовы могут быть до завершения. Как я могу написать эту главную кнопку так, что она будет:

1. Показать изображение загрузки сразу, и
2. Скрыть изображение загрузки и показать диалоговое окно после того, как все вызовы AJAX закончили?

Answer 1

Вы хотите использовать .done(), чтобы указать код, который должен ждать завершения асинхронной функции AJAX.

$.ajax({ 
    url:.., 
    type: .., 
    data: /* this subform's data*/ }) 
    .done(function() { 
     //Put code here 
    }); 

Answer 2

Вы пытались .ajaxStop() event handler?

$(document).ajaxStop(function() { 
    // place code to be executed on completion of last outstanding ajax call here 
}); 

также проверить this answer

Answer 3

Следите за сколько суб-формы есть;

$subFormsCount = $('.subform').length; 

Отслеживать, сколько форм было отправлено;

$submittedForms = 0; 

Каждый раз, когда форма заканчивается подачей, добавьте в $ Представленные формы;

$.ajax({ 
    .. 
    .. 
    done: function(){ 
    $submittedForms++; 
    } 
}) 

Создайте глобальный таймер, чтобы узнать, совпадает ли количество представленных форм с общим количеством подформ. Если true, скройте диалоговое окно;

setInterval(function(){ 
    if($submittedForms == $subFormsCount){ 
    $('.dialog').show(); 
    } 
}, 50ms) 

Редактировать

Вы можете пропустить глобальный таймер (как это, вероятно, будет несколько миллисекунд OUT) - включают в себя проверку в вашем ajax.done вместо;

$.ajax({ 
    .. 
    .. 
    done: function(){ 
    $submittedForms++; 

    if($submittedForms == $subFormsCount){ 
    $('.dialog').show(); 
    } 
    } 
}) 

Answer 4

Я предполагаю, что у вас есть 9 подформ и 1 основная форма. Код для 8 подформ будет таким же.

Я использую здесь асинхронный: ложь: Означает следующий Аякс не будет звонить, пока первый один не завершается.

Пример Формат кода:

var id = 5; 
$.ajax({ 
    url: , 
    type: 'POST', 
    data: {'id':id}, 
    dataType: 'JSON', 
    async: false, 
    error : function(xhr, textStatus, errorThrown) { 
     alert('An error occurred!'); 
    }, 
    success : function(response){ 

    } 
}); 

Просто установите переменную в последней форме к югу, который девятым подчиненной.

success : function(response){ 
     var counter = true; 
    } 

if(counter){ 
    /* Code to show dialog.*/ 
} 

Answer 5

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

$('#main').on('click', '.subform_submit', function() { 

    var formRequests = $('.subform').map(function() { 
    var $form = $(this); 
    return $.ajax({ 
     url: '', 
     data: $form.serialzeArray() 
    }); 
    }).get(); 

    $.when.apply(undefined, formRequests).done(function() { 
    console.log('All done!'); 
    }); 

}); 

Здесь идет очень похожие немного демо я просто составленный: https://jsfiddle.net/g9a06y4t/