Pracuję nad dynamiczną stroną internetową. W głównej formie mam wiele podformuł, które można dodawać i usuwać dynamicznie.Oczekiwanie na wszystkie wywołania AJAX niż wyświetlanie okna dialogowego
<div class='subform'>
//form fields
<input ...>
...
<button class='subform_submit'>
</div>
Dla każdego podformularzu, wiążę wywołanie AJAX na przycisk Prześlij podformularzu jest tak:
$('#main').on('click', '.subform_submit', function(){
// Get this subform's user input
...
$.ajax({
url: ..,
type: ..,
data: /* this subform's data */
});
});
Więc w tej stronie, mogę mieć od 0 do 10 podformularze w zależności od wyboru użytkownika. Mam również główny przycisk przesyłania na dole strony, który może przesłać te podformy i dane głównego formularza razem.
$('#main').on('click', '#submit', function(e){
$('.subform_submit').click(); // Submit each subform
bootbox.confirm({ });
})
Gdy przycisk główny złożyć kliknięciu, chcę pokazać obraz ładowania, a następnie wyświetlić okno dialogowe (używam bootbox.confirm()
tutaj), aż wszystkie wywołania AJAX zakończyły. To okno dialogowe informuje użytkownika, że został przesłany cały formularz zawierający podformy. Ale problem polega na tym, że każde wywołanie AJAX może zająć 2 sekundy i nie wiem, jak połączenia mogą być oczekujące na zakończenie. Jak mogę napisać to główny przycisk Prześlij tak, że będzie:
- Pokaż loading image natychmiast, a
- Ukryj loading image i pokazać okno dialogowe po wszystkie wywołania AJAX zakończeniu?
Dzięki za @Lewis najlepsze rozwiązanie! – monknom