Tüm AJAX çağrısının gösterilmesi için beklet iletişim kutusu

Question

Dinamik bir çevrimiçi form web sitesinde çalışıyorum. Ana formda, dinamik olarak eklenebilir ve silinebilen çoklu alt formlarım var.

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

Yani bu sayfada ben kullanıcının seçimine bağlı olarak 0 ila 10 alt formlar olabilir: Her alt form için

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

, böyle alt formun Gönder düğmesini bir AJAX çağrısı bağlamak. Ayrıca, sayfanın alt kısmında, bu alt formları ve ana formun verilerini birlikte gönderebilen ana bir gönderme düğmem var. göndermek ana düğmesi tıklandığında kez

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

, ben bir yükleme resmini göstermek ve sonra tüm AJAX çağrıları tamamlayana kadar bir iletişim kutusu (burada bootbox.confirm() kullanın) göstermek istiyorum. Bu iletişim kutusu, kullanıcıya alt formlar dahil olmak üzere tüm formun gönderildiğini bildiriyor. Ancak sorun şu ki, her AJAX çağrısının tamamlanması 2 saniye sürebilir ve aramaların nasıl tamamlanacağını beklemiyorum.

1. hemen Yükleme resmini gösterin ve
2. Yükleme resmini gizleme ve tüm AJAX çağrıları tamamladıktan sonra iletişim kutusunu gösterir: Nasıl olacak o yüzden bu ana Gönder düğmesini yazabilirim?

Answer 1

AJAX eşzamansız işlevi tamamlanana kadar beklemesi gereken kodu belirtmek için .done() kullanmak istiyorsunuz.

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

Answer 2

.ajaxStop() event handler denediniz mi? Ayrıca

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

, this answer

Answer 3

kaç alt formları vardır takip edin kontrol edin;

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

Kaç formun gönderildiğini takip edin;

$submittedForms = 0; 

Her form gönderimi bitirdiğinde, $ submitForms;

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

gönderilen form sayısı, alt form sayısını maçları görmek için küresel bir çekim oluşturun. Doğruysa, iletişim kutusunu gizleyin;

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

Düzenleme

(bu muhtemelen bir kaç dışarı milisaniye olacak şekilde) Sen küresel zamanlayıcı atlamak

- yerine ajax.done check dahil;

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

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

Answer 4

Sanırım 9 alt form ve 1 ana formunuz var. 8 alt form için kod aynı olacaktır.

Burada kullanıyorum eşzamansız: false: Sıradaki ajax'in, birincisi tamamlanana kadar aramayacağı anlamına gelir.

Örnek Kod Formatı: 9 alt form olan son alt formda

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){ 

    } 
}); 

Sadece set değişkeni.

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

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

Answer 5

Sen tamamlamak için her istek için beklemek $.when kullanabilirsiniz. Böyle bir şey seni yakınlaştırmalı. Temel olarak tüm ajax isteklerini bir dizide saklamak ve bunu argümanlar olarak when'a iletmek istersiniz. @Lewis İyi çözümü için https://jsfiddle.net/g9a06y4t/