जावास्क्रिप्ट का निष्पादन जब एक विजेट बैकएंड में जोड़ा जाता है

20

मेरे पास विजेट्स हैं जिनके पास जावास्क्रिप्ट नियंत्रण उनसे जुड़ा हुआ है।

यदि विजेट एडमिन पेज लोड होने पर विजेट मौजूद है, तो नियंत्रण सही तरीके से काम करता है।

जब मैं एक नया विजेट जोड़ता हूं, तो वे सही तरीके से काम नहीं करते हैं, मुझे मार्कअप मिलता है, लेकिन कोई भी जावास्क्रिप्ट ईवेंट प्रभावी नहीं होता है।

यदि मैं नए विजेट को सहेजता हूं, जब फॉर्म पुनः लोड होता है, तो नियंत्रण सही तरीके से बनाए जाते हैं और अब काम करते हैं।

पृष्ठ को ताज़ा करना भी समस्या को ठीक करता है, लेकिन केवल मौजूदा विजेट के लिए। नए विगेट्स अभी भी यह समस्या है।

विशेष रूप से मैं इन बिंदुओं पर चुनिंदा सूचनाओं का चयन कर रहा हूं:

दस्तावेज़ तैयार है
Ajaxcomplete

मैंने सत्यापित किया है कि मेरा कोड वांछित रूप से प्रत्येक घटना पर चलाया जाता है, लेकिन परिणाम अपेक्षित नहीं हैं।

यहाँ एक परीक्षण प्लगइन है जो समस्या को प्रदर्शित करता है:

https://gist.github.com/Tarendai/8466299

आप देखेंगे कि मेरे पास एक काउंटर है जो हर चुनिंदा तत्व के साथ बढ़ता है जो पाता है कि यह परिवर्तित हो सकता है।

टिप्पणियाँ:

जब विजेट पेज लोड होता है, तो मैं उम्मीद के मुताबिक JS कंसोल में काउंटर बढ़ा सकता हूं
जब मैं एक नया विजेट जोड़ता हूं, तो कोड चलाया जाता है, हालांकि, यह किसी भी चुनिंदा तत्वों को खोजने में विफल रहता है, जैसा कि पाया जा सकता है। पाया जा रहा है। गति 0. यह मामला नहीं होना चाहिए, क्योंकि उस प्रकार का हर नया विजेट होना चाहिए एक चुनिंदा तत्व है
चुनिंदा तत्वों के पास उनकी पहचान करने के लिए एक वर्ग है, मौजूदा विगेट्स पर दोहराव और पुन: प्रसंस्करण को रोकने के लिए चयनित लाइब्रेरी को लागू करने के बाद इस वर्ग को हटा दिया जाता है।
Selectize का उपयोग करने से पहले, मैंने Select2 का उपयोग किया, जिसमें एक ही मुद्दा था
AJAX कोड के बारे में टिप्पणी करते हुए, मैं नए विजेट्स से मानक चयन इनपुट की अपेक्षा करूंगा। वे नहीं। मुझे नहीं पता कि ऐसा क्यों है

तो मैं बदलाव करने से पहले उपयोगकर्ता को बिना बताए ताज़ा / क्लिक करने के लिए चयन नियंत्रण कार्य कैसे करूं?

widgets javascript

— टॉम जे नोवेल
स्रोत

यह एक इवेंट डेलिगेशन मुद्दा है। आपको jQuery की .on()विधि का उपयोग करने की आवश्यकता होगी । जो आपको दस्तावेज़ में एक घटना को बांधने की आवश्यकता है। हालांकि क्या घटना उचित होगी, मुझे अभी यकीन नहीं है। अंततः यह इसलिए है क्योंकि जब पृष्ठ लोड किया गया था और अधिकांश भाग नए तत्वों (विजेट सामग्री) के लिए अंधे हैं जो DOM के प्रारंभिक संस्करण का प्रतिनिधित्व करते हैं, जो कि ajax के माध्यम से जोड़े जा रहे हैं। उम्मीद है कि मैं आपको सही दिशा में इंगित करूँगा, अगर मैं काम पर होने पर बेहतर जवाब नहीं दे सकता।

यह वही है जो मैंने उम्मीद की थी, और मैंने jQuery( document ).ajaxStop( function() {भाग क्यों जोड़ा ताकि मैं नए लोड किए गए विगेट्स में नियंत्रण को इनिशियलाइज़ कर सकूं। लेकिन अगर मुझे लगता है कि लाइन से हटाया मैं मानक HTML आदानों का चयन किया है में नए विजेट उम्मीद होती है, लेकिन वे नहीं है = एस

— टॉम जम्मू नॉवेल

जैसा कि @ aaron-holbrook ने टिप्पणी की है, इसका दृष्टिकोण widget-updatedऔर widget-addedघटनाओं का उपयोग करके सबसे साफ है । इसके अलावा, मैं @michaeljames कोड में, तत्व आईडी का उपयोग करने पर जोर देना चाहता हूं #widgets-right। अपने जेएस कोड के अंदर सक्रिय विजेट तत्वों को लक्षित करने के लिए इसका उपयोग करना सुनिश्चित करें अन्यथा आपको डुप्लिकेट तत्व मिल सकते हैं क्योंकि आपका कोड स्क्रीन के बाईं ओर छिपे हुए निष्क्रिय विजेट तत्वों का भी चयन कर सकता है (और विजेट जोड़ा जाने पर वे क्लोन हो जाते हैं)।

— जुलिएन

12

बढ़िया खबर,

मैंने इसे ठीक कर लिया है।

मेरी प्रारंभिक टिप्पणी में आपके जिस्ट को याद करने के लिए माफी और आपको एक जवाब देना है जो आपने पहले ही लागू किया था। वह मुझे ट्रेन में रहते हुए अपने फोन पर जवाब देना सिखाएगा!

अजाक्सस्टॉप का आपका उपयोग सही है। नरक जेएस सबसे अधिक भाग के लिए सही ढंग से काम कर रहा है, आप सीएसएस शैलियों को आरंभिक और डोम में बदलाव देख सकते हैं।

मुद्दा वास्तव में आपके चयनकर्ता के साथ है।

यह इसलिए है क्योंकि विजेट सामग्री को अजाक्स के माध्यम से लोड नहीं किया जाता है, वास्तव में यह इसे बाएं हाथ के कॉलम से क्लोन करता है जहां यह छिपा हुआ है और फिर दाहिने हाथ के कॉलम में विजेट की स्थिति को बचाने के लिए एक अजाक्स कॉल को फायर करता है। यह बताता है कि क्यों ajaxstop एक इलाज का काम करता है, यहां तक कि विचार सामग्री को क्लोन किया जाता है। हालाँकि, बाएं हाथ के कॉलम में विजेट का एक छिपा हुआ संस्करण है, आपका JS उस पर इंस्टेंट कर रहा है। जैसे कि जब आप इसे दाहिने हाथ के कॉलम में खींचते हैं, तो आपको छिपे हुए विजेट का एक उलझा हुआ क्लोन मिल रहा है।

इस प्रकार आपको बाईं ओर एक का चयन करने की आवश्यकता है। नीचे सही कोड है:

<script>
jQuery( document ).ready( function( $ ) {
    function runSelect() {
        var found = $( '#widgets-right select.testselectize' );
        found.each( function( index, value ) {

            $( value ).selectize();
                .removeClass( 'testselectize' )
                .addClass( 'run-' + window.counter );

            console.log( $val );
            window.counter++;
        } );
    }

    window.counter = 1;

    runSelect();

    $( document ).ajaxStop( function() {
        runSelect();
    } );
} );
</script>

— कैसर
स्रोत

पवित्र moly, मैं परीक्षण जाने के लिए इस <3 की जरूरत है

— टॉम जम्मू नॉवेल

एक प्रमुख सिरदर्द के लिए बहुत ही सुंदर समाधान!

— बोसको

3

मैं हर एक 'ajaxStop' ईवेंट पर चलने के खिलाफ सलाह दूंगा और इसके बजाय 'विजेट-जोड़ा' के साथ-साथ 'विजेट-अपडेटेड' ईवेंट का उपयोग करने का सुझाव दूंगा।

— तिर्युन

16

जैसा कि @ aaron-holbrook ने टिप्पणी की है कि एक क्लीनर दृष्टिकोण क्या करना होगा:

jQuery(document).on('widget-updated widget-added', function(){
    // your code to run
});

कई मामलों में आप जेएस को भी चलाना चाहेंगे जब पेज अपडेट होने के साथ ही पेज लोड हो जाएगा। आप ऐसा कर सकते हैं।

function handle_widget_loading(){
   // your code to run
}
jQuery(document).ready( handle_widget_loading );
jQuery(document).on('widget-updated widget-added', handle_widget_loading );

संदर्भों के लिए यहां केवल पेस्ट करना, क्योंकि टिप्पणियों को ढूंढना बहुत आसान है

— chifliiiii
स्रोत

2

शायद $ $ के बजाय jQuery का उपयोग करना चाहिए

— मार्क कपलुन