शो संवाद बॉक्स से सभी AJAX कॉल की प्रतीक्षा

Question

मैं एक गतिशील ऑनलाइन फॉर्म वेबसाइट पर काम कर रहा हूं। मुख्य रूप में, मेरे पास कई उप-रूप हैं जिन्हें गतिशील रूप से जोड़ा और हटाया जा सकता है।

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

तो उस पृष्ठ में, मैं उपयोगकर्ता के चयन के आधार पर 0 से 10 subforms हो सकता है:

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

प्रत्येक उप-प्रपत्र के लिए, मैं इस तरह उप-प्रपत्र के सबमिट बटन पर एक AJAX कॉल बाँध। मेरे पास पृष्ठ के नीचे एक मुख्य सबमिट बटन भी है, जो उन सबफॉर्म और मुख्य फ़ॉर्म के डेटा को एक साथ सबमिट कर सकता है।

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

एक बार मुख्य सबमिट बटन पर क्लिक किया जाता है, मैं एक लोड हो रहा है तस्वीर दिखाने के लिए और फिर एक संवाद बॉक्स (मैं bootbox.confirm() यहाँ का उपयोग करें) दिखाने के सभी AJAX कॉल पूर्ण नहीं करने तक करना चाहते हैं। यह संवाद बॉक्स उपयोगकर्ता को बता रहा है कि उप-रूपों सहित पूरे फॉर्म को सबमिट कर दिया गया है। लेकिन समस्या यह है कि प्रत्येक AJAX कॉल को पूरा होने में 2 सेकंड लग सकते हैं और मुझे नहीं पता कि कॉल पूर्ण होने के लंबित कैसे हो सकते हैं। मैं इस मुख्य सबमिट बटन पर लिख सकते हैं इतना है कि यह होगा:

1. तुरंत लोड हो रहा है चित्र दिखाएं, और
2. चित्र लोड करने हाइड एंड संवाद बॉक्स दिखाने के सभी AJAX कॉल पूरा करने के बाद?

Answer 1

आप AJAX एसिंक्रोनस फ़ंक्शन पूर्ण होने तक प्रतीक्षा करने के लिए .done() का उपयोग करना चाहते हैं।

$.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++; 
    } 
}) 

एक वैश्विक घड़ी बनाएं प्रस्तुत रूपों की संख्या subforms की कुल संख्या से मेल खाता है या नहीं। यदि सही है, तो संवाद बॉक्स छुपाएं;

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

संपादित

आप वैश्विक टाइमर को छोड़ सकता है (जैसा कि यह शायद कुछ मिलीसेकेंड बाहर हो जाएगा) - बजाय अपने ajax.done में जांच में शामिल हैं,

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

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

Answer 4

मुझे लगता है कि आपके पास 9 सबफॉर्म और 1 मुख्य रूप है। 8 सबफॉर्म के लिए कोड समान होगा।

मैं यहां एसिंक का उपयोग करता हूं: झूठी: मतलब अगले AJAX कॉल नहीं होगा जब तक कि पहला पूरा नहीं हो जाता है।

नमूना कोड प्रारूप:

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

    } 
}); 

अपने पिछले उप के रूप में बस सेट चर 9 उप-प्रपत्र है।

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

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

Answer 5

आप प्रत्येक अनुरोध को पूरा करने के लिए $.when का उपयोग कर सकते हैं। इस तरह कुछ आपको बंद कर देना चाहिए। आप मूल रूप से सभी एजेक्स अनुरोधों को एक सरणी में संग्रहीत करना चाहते हैं और when को तर्क के रूप में पास करना चाहते हैं। https://jsfiddle.net/g9a06y4t/