javascript फार्म के लिए प्रतीक्षा करें। Submit()/पोस्ट को पूरा करने के लिए



c# jquery (1)

मैं वास्तव में एक विचित्र स्थिति में फंस गया हूँ यह समझाने के लिए जटिल है लेकिन मैं अपनी पूरी कोशिश करूंगा

इस मुद्दे का विस्तृत विवरण:

हर शीर्ष नेवी क्लिक (ग्रीन डोनट्स / सर्कल), या अगला बटन पर, मुझे फ़ॉर्म सबमिट करना होगा, यदि वह मौजूद है और मान्य है। यदि वैध नहीं है, तो form.valid () सत्यापन त्रुटियों को ट्रिगर करता है और झूठी वापसी किसी और प्रचार को रोक देगा। यह सेटअप बिना किसी निरंतर काम कर रहा था जब तक मैंने एक अजीब व्यवहार देखा जो बहुत हठ नहीं है। मेरे तीसरे टैब पर फॉर्म, विशेष रूप से, काफी डेटा भारी है जब मैं अगला बटन दबाता हूं, तो यह उसी प्रक्रिया के माध्यम से व्यावहारिक रूप से जाना चाहिए: किसी मौजूदा फॉर्म की जांच करें, यदि मान्य है, तो सबमिट करें। सबमिट करें पोस्ट क्रिया पद्धति को कॉल करें और जब पोस्ट पूरा हो जाए तो अगले टैब के लिए दृश्य प्राप्त हो जाएगा। यह 5-10 बार काम करता है, लेकिन दूसरी बार POST से निष्पादित करता है, जो अगले पृष्ठ को अपूर्ण डेटा से लोड करता है। जब मैं ब्रेकपॉइंट को डिबग करता हूं, तो मैं वर्तमान टैब के पहले पोस्ट करने के लिए अगले टैब के लिए जीईटी देखता हूं।

यूआई समझाया:

मेरे पास 4 नेविगेशन के साथ एक यूडीआई है - शीर्ष पर बटन - हमेशा एक रूप है - और नीचे में मेरे पास पिछला और अगला बटन हैं I

फार्म का निर्माण Ajax.BeginForm का उपयोग कर Ajax.BeginForm

प्रत्येक एनएवी लिंक <शीर्ष पर तत्व के लिए, मेरे पास जावास्क्रिप्ट फ़ंक्शन है I

var LoadTabs = function (e, arg) {  
    // This is to validate a form if one of the top links is clicked and form has incomplete fields...
    if (arg !== "prev" && arg !== "next") {
        if (!window.ValidateForm(false)) return false;
    }

    var url = $(this).attr('data'); // this contains link to a GET action method
    if (typeof url != "undefined") {
        $.ajax(url, { context: { param: arg } }).done(function (data) {                
            $('#partialViewContainer').html(data);
        });
    }
}

उपरोक्त यह फ़ंक्शन पृष्ठ लोड पर प्रत्येक शीर्ष लिंक को बांधता है।

$('.navLinks').on('click', LoadTabs);

मेरा अगला और पिछला बटन मूल रूप से क्लिक ईवेंट यानी LoadTabs फ़ंक्शन को ट्रिगर करता है।

$('button').on('click', function () { 
        if (this.id === "btnMoveToNextTab") {
            if (!window.ValidateForm(true)) return false;                

            $.ajax({
                url: url,
                context: { param: 'next' },
                method: "GET",
                data: data,
                success: function(response) {
                    if (typeof response == 'object') {
                        if (response.moveAhead) {
                            MoveNext();
                        }
                    } else {
                        $('#mainView').html(response);
                    }
                    ScrollUp(0);
                }
            });
        } 

        if (this.id === "btnMoveToPreviousTab") {
            MoveBack();
        }
        return false;
    });


MoveNext() Implementation is as below:

function MoveNext() {        
    var listItem = $('#progressbarInd > .active').next('li');        

    listItem.find('.navLink').trigger('click', ['next']);
    ScrollUp(0);
}

समस्या, कुछ कारणों से, जब नव लिंक 3 सक्रिय है और मैंने अगला बटन दबाया है - फ़ॉर्म के माध्यम से पहले फॉर्म को पोस्ट करने के बजाय। () - नेवी 4 को ट्रिगर किया गया है - इसलिए एनएवी के फार्म के पहले एनएवी 4 के लिए GET प्राप्त करें 3।

मेरा ValidateForm विधि मूल रूप से बस जाँच रहा है कि फ़ॉर्म मौजूद है और मान्य है तो सबमिट करें, और फिर झूठी वापसी करता है। इसके नीचे:

function ValidateForm(submit) {

    var form = $('form');

    // if form doesn't exist on the page - return true and continue
    if (typeof form[0] === "undefined") return true;

    // now check for any validation errors
    if (submit) {
        if (!$(form).valid()) {                
            return false;
        } else {
            $(form).submit();
        }
    } 
    else {
        return true;
    }

    return true;
}

मेरी अटकलें हैं कि form.submit ट्रिगर हो सकता है क्योंकि यह होना चाहिए, लेकिन जब से सबमिट करने के लिए थोड़ी अधिक समय लेता है, तो यह बटन onclick ईवेंट में अगले कोड ब्लॉक के साथ जारी रहता है।

मैंने पहले सोचा कि यह एक सर्वर साइड मुद्दा है जैसा कि मैंने पोस्ट में कुछ छोरों के साथ डेटा का एक बड़ा हिस्सा सहेजा है, और कोई भी कोड ब्लॉक जो प्रक्रिया में भारी है I

var saveTask = Task.Factory.StartNew(() => ControllerHelper.SomeMethod(db, model)); Task.WaitAll(saveTask);

WaitAll कुछ इंतजार और निष्पादन रोकेंगे जब तक SomeMethod को निष्पादित करना समाप्त नहीं होगा। मुझे यकीन नहीं है कि मैं जावास्क्रिप्ट में एक प्रक्रिया को कैसे लॉक कर सकता हूं और इसके निष्पादन को खत्म करने की प्रतीक्षा कर रहा हूं। क्योंकि मुझे लगता है कि अगर मैं किसी तरह के रूप में form.submit () को मान्य फॉर्म में तब तक रोक सकता हूं जब तक कि इसकी समाप्ति प्रक्रिया नहीं हो .. कॉलबैक विधि के माध्यम से शायद ...

कृपया अगर कोई मुझे सही दिशा में रख सकता है, तो मैं मदद की सराहना करता हूं। यदि आपको अधिक जानकारी की आवश्यकता है तो कृपया मुझे बताएं कि मुझे प्रदान करने में खुशी होगी!


अजाक्स async है, और आपके फॉर्म सबमिट करते हैं जो अजाक्स का उपयोग कर रहा है। Ajax.BeginForm() एजेक्स का उपयोग कर Ajax.BeginForm() है क्या हो रहा है कि जब आप अपना 'अगला' बटन क्लिक करते हैं, जो $('button').on('click', function () { code:

  1. आप ValidateForm() $(form).submit(); फ़ंक्शन (और इसे मान्य मानते हैं), आपके $(form).submit(); कोड की लाइन एक अजाक्स पोस्ट करना शुरू कर देती है
  2. कोड अंतिम return true; लाइन जबकि एजेक्स कॉल निष्पादित है।
  3. क्योंकि ValidateForm() फ़ंक्शन सही $.ajax है, $.ajax GET कॉल अब प्रारंभ हो जाती है, लेकिन उस समय ValidateForm() फ़ंक्शन में AJAX POST निष्पादित नहीं हो सकता है जिससे आपके GET विधि को अमान्य डेटा वापस करने का कारण हो सकता है

आपको अपना कोड बदलने की आवश्यकता है ताकि पोस्ट विधि कॉल पूरा हो जाने के बाद GET कॉल किया जा सके। और जब आप अपने कोड में $.ajax() विधियों का उपयोग करते हैं और $.ajax() आपको अधिक लचीलापन देता है, तो यह jquery.unbtrusive-ajax.js का उपयोग करने के लिए अनावश्यक लगता है jquery.unbtrusive-ajax.js Ajax.BeginForm() (और jquery.unbtrusive-ajax.js को शामिल करने के अतिरिक्त ओवरहेड jquery.unbtrusive-ajax.js स्क्रिप्ट) आपको फ़ॉर्म भी हैंडल करना चाहिए। .submit() फ़ंक्शन (यदि आप 'अगला' बटन को फ़ॉर्म में एक सबमिट बटन नहीं बनाना चाहते हैं, तो आप बटन में .submit() ईवेंट ट्रिगर कर सकते हैं। क्लिक करें .click() हैंडलर )

$(document).on('submit', 'form', function(e) {
    e.preventDefault(); // cancel default submit
    var form = $(this);
    if (!form.valid()) {
        return; // will display the validation errors
    }
    .... // get the relevant urls to the GET and POST methods etc
    $.post(postUrl, form.serialize(), function(data) {
        .... // not clear if your [HttpPost] method returns anything
    }).done(function() {
        $.get(getUrl, someData, function(response) {
            .... // Update the DOM with the next form?
            .... // Re-parse the validator for client side validation
        }
    }).fail(function() {
        .... // code that you might run if the code in the [HttpPost] method fails
    });
});

आपको [HttpPost] पद्धति में उचित 'अगले' दृश्य लौटने पर भी विचार करना चाहिए ताकि आपको उसे प्राप्त करने के लिए सर्वर पर दूसरा कॉल वापस करने की आवश्यकता न हो।

यह डिफर्ड ऑब्जेक्ट दस्तावेज और $.when() का उपयोग तब भी पढ़ने योग्य है $.when() , $.then() आदि।





asp.net-mvc-5