Debounce क्लिक करता है जब एक वेब फ़ॉर्म पर साइन

वोट
3

एक खराब लिखा बैक-एंड सिस्टम हम साथ इंटरफेस लोड हम उत्पादन कर रहे हैं से निपटने के साथ परेशानी हो रही है। जबकि वे अपने लोड समस्याओं को ठीक, हम किसी भी अतिरिक्त भार हम पैदा कर रहे हैं, जिनमें से एक यह है कि बैक-एंड सिस्टम कोशिश करते हैं और एक फार्म प्रस्तुत सेवा भले ही एक और जमा एक ही उपयोगकर्ता से आ गया है करने के लिए जारी कम करने के लिए कोशिश कर रहे हैं।

एक बात हमने देखा है कि उपयोगकर्ताओं को फ़ॉर्म जमा बटन को डबल क्लिक करके है। मैं इन क्लिक डी-उछाल, और एक दूसरे फ़ॉर्म प्रविष्टि को रोकने के लिए की जरूरत है।
मेरे दृष्टिकोण (प्रोटोटाइप का प्रयोग करके) एक स्थानों onSubmitप्रपत्र निम्नलिखित समारोह जो फार्म जमा करने बटन छुपाता है और एक को प्रदर्शित करता है कहता है कि लोड हो रहा है ... div

function disableSubmit(id1, id2) {
    $(id1).style.display = 'none';
    $(id2).style.display = 'inline';
}

समस्या मैं इस दृष्टिकोण के साथ पाया है कि अगर मैं में एक एनिमेटेड GIF का उपयोग करें लोड हो रहा है ... है div, यह ठीक लोड करता है, लेकिन जब पर्चे को जमा किया जाता है चेतन नहीं है।

वहाँ जबकि करने के लिए (अंततः) लोड प्रपत्र परिणाम के लिए इंतजार इस de-उछाल कर सकते हैं और पृष्ठ पर एनीमेशन दिखाने के लिए जारी रखने के लिए एक बेहतर तरीका है?

19/09/2008 को 00:23
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


5 जवाब

वोट
1

तुम बस शैली बदलने के बजाय इनपुट पर "अक्षम" ध्वज को सेट कर सकें (type = पेश करें) तत्व,। यही कारण है कि पूरी तरह से ब्राउज़र की ओर से शट डाउन करना चाहिए।

देखें: http://www.prototypejs.org/api/form/element#method-disable

19/09/2008 को 00:28
का स्रोत उपयोगकर्ता

वोट
2

आप jQuery काम मिल गया है, तो एक क्लिक () घटना है कि प्रारंभिक जमा करने के बाद बटन को निष्क्रिय देते हैं -

$('input[type="submit"]').click(function(event){
 event.preventDefault();
 this.click(null);
});

इस तरह की चीज।

19/09/2008 को 04:42
का स्रोत उपयोगकर्ता

वोट
4

प्रोटोटाइप का उपयोग करना, आप अगर किसी भी रूप प्रस्तुत किया गया है को देखने के लिए इस कोड का उपयोग और सभी बटन प्रस्तुत जब यह होता है निष्क्रिय कर सकते हैं:

document.observe( 'dom:loaded', function() { // when document is loaded
    $$( 'form' ).each( function( form ) { // find all FORM elements in the document
        form.observe( 'submit', function() {  // when any form is submitted
            $$( 'input[type="submit"]' ).invoke( 'disable' );  // disable all submit buttons
        } );
    } );
} );

इस पर बटन प्रस्तुत है कि डबल क्लिक करें उपयोगकर्ताओं के साथ मदद करनी चाहिए। हालांकि, यह अभी प्रपत्र किसी अन्य तरीके से (दबाने जैसे पाठ क्षेत्र पर दर्ज) प्रस्तुत करने के लिए संभव नहीं होगा। इसे रोकने के लिए, आपको पहले एक के बाद किसी भी रूप प्रस्तुत करने के लिए देखना शुरू करने और इसे रोकने के लिए है:

document.observe( 'dom:loaded', function() {
    $$( 'form' ).each( function( form ) {
        form.observe( 'submit', function() {
            $$( 'input[type="submit"]' ).invoke( 'disable' );
            $$( 'form' ).observe( 'submit', function( evt ) { // once any form is submitted
                evt.stop(); // prevent any other form submission
            } );
        } );
    } );
} );
27/09/2008 को 05:28
का स्रोत उपयोगकर्ता

वोट
3

ऊपर सभी अच्छे सुझाव। क्या तुम सच में "debounce" के रूप में आप कहते हैं, करना चाहते हैं तो मुझे लगता है कि के लिए एक महान समारोह मिल गया है। पर अधिक जानकारी unscriptable.com

var debounce = function (func, threshold, execAsap) {

    var timeout;

    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
                func.apply(obj, args);
            timeout = null; 
        };

        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);

        timeout = setTimeout(delayed, threshold || 100); 
    };

}
20/03/2009 को 18:17
का स्रोत उपयोगकर्ता

वोट
0

AJAX के साथ फ़ॉर्म सबमिट करें, और GIF चेतन होगा।

03/12/2010 को 02:38
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more