दिलचस्प पोस्ट
जीसीसी के साथ सी प्रोग्राम के प्रवेश बिंदु को कैसे बदल सकता है? परीक्षण रनर 'जेयूनिट 4' के साथ कोई परीक्षण नहीं मिला MySQL तालिका में varchar लंबाई का महत्व क्यों स्पष्ट रूप से इंटरफ़ेस लागू करें? एंड्रॉइड एनडीके बिल्ड, विधि का समाधान नहीं किया जा सका एक WPF अनुप्रयोग में क्रेडेंशियल एन्क्रिप्ट कैसे दो HTML पृष्ठों के बीच चर का आदान प्रदान करने के लिए? एंकर (लिंक) के लिए रेखांकन कैसे हटाएं? मल्टीट्रेडेड PyQT में जीयूआई तत्वों को अद्यतन करना जावास्क्रिप्ट, jquery-ajax का उपयोग करके <input type = 'file'> के बदलने पर चयनित फ़ाइल का पूरा रास्ता कैसे प्राप्त करें? जावा में XPath के साथ XML को पार्स करना एक चर के लिए हल नहीं किया जा सकता मैं पायथन में एक्सेल फाइल कैसे खोल सकता हूँ? पायथन नॉन-लॉकल स्टेटमेंट साथ ही एक सूची में कई डेटा.फ्रेमों को मर्ज कर सकते हैं

JSF / प्राइमफेस AJAX अपडेट्स टूटता है jQuery इवेंट श्रोता फ़ंक्शन बाइंडिंग

मैं नीचे दिए गए jQuery का उपयोग करते हुए HTML में हर input लिए एक change ईवेंट श्रोता को पंजीकृत कर रहा हूं:

 <h:head> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $(':input').each(function() { $(this).change(function() { console.log('From docReady: ' + this.id); }); }); }); function changeHandler() { console.log("from changeHandler"); } //]]> </script> </h:head> <h:body> <h:form id="topForm"> <p:commandButton id="myButton" value="update" action="#{testBean.submit}" partialSubmit="true" process=":myForm:panel" update=":myForm:panel" /> </h:form> <h:form id="myForm"> <p:panel id="panel"> <p:inputTextarea id="myTextarea" value="#{testBean.val}" onchange="changeHandler();"/> </p:panel> </h:form> </h:body> 

यदि उपयोगकर्ता myTextarea के कंटेंट को बदलता है तो दोनों change घटनाएं शुरू हो रही हैं हालांकि अद्यतन बटन दबाने के बाद, जो आंशिक रूप से myTextarea अपडेट करता है, केवल परिवर्तनहैंडलर बाद में ट्रिगर हो रहा है। $(document).ready() में बाध्य होने वाला कार्यक्रम $(document).ready() अब ट्रिगर नहीं कर रहा है।

क्या यह प्राइमफेस संबंधित और / या अपेक्षित व्यवहार है? यदि हां, तो मैं फिर से दस्तावेज तैयार स्क्रिप्ट को फिर से बिना दुबारा दूसरे ईवेंट को ट्रिगर करने के लिए कैसे सुनिश्चित कर सकता हूं।

वेब के समाधान से एकत्रित समाधान "JSF / प्राइमफेस AJAX अपडेट्स टूटता है jQuery इवेंट श्रोता फ़ंक्शन बाइंडिंग"

आपकी समस्या के कारण, AJAX अनुरोध HTML DOM पेड़ को एजेक्स प्रतिक्रिया से नए HTML तत्वों के साथ अपडेट करेगा। उन नए HTML तत्व – जाहिर है- jQuery ईवेंट हैंडलर फ़ंक्शन संलग्न नहीं है। हालांकि, $(document).ready() AJAX अनुरोधों पर पुन: निष्पादित नहीं किया गया है। आपको मैन्युअल रूप से इसे फिर से लागू करना होगा।

यह विभिन्न तरीकों से प्राप्त किया जा सकता है। सबसे आसान तरीका $(document).on(event, selector, function) बजाय $(document).on(event, selector, function) उपयोग करना है $(selector).on(event, function) । यह दस्तावेज से जुड़ा है और दिया गया functionRef आरएफ हमेशा लागू होता है जब दिए गए ईवेंट का नाम दिए गए selector मेल खाने वाले तत्व पर ट्रिगर होता है। तो आपको JSF द्वारा फ़ंक्शन को स्पष्ट रूप से पुन: निष्पादित करने की आवश्यकता नहीं है।

 $(document).on("change", ":input", function() { console.log("From change event on any input: " + this.id); }); 

वैकल्पिक तरीके से एजेक्स अनुरोध के पूर्ण होने पर फ़ंक्शन को स्पष्ट रूप से पुन: निष्पादित करना है। यह केवल एकमात्र तरीका होगा जब आप वास्तव में ready / load ईवेंट के दौरान फ़ंक्शन को निष्पादित करने में रुचि रखते हैं (जैसे कि कुछ प्लगिन विशिष्ट व्यवहार / देखो 'एन'फ़ेल, जैसे तिथि पिकर को सीधे लागू करने के लिए)। सबसे पहले, आपको $(document).ready() को रीफैक्टर करने की आवश्यकता है। फिर से काम करने योग्य फ़ंक्शन के रूप में $(document).ready() नौकरी:

 $(document).ready(function(){ applyChangeHandler(); }); function applyChangeHandler() { $(":input").on("change", function() { console.log("From applyChangeHandler: " + this.id); }); } 

(ध्यान दें कि मैंने आपके पूरी तरह से अनावश्यक $.each() दृष्टिकोण को हटा दिया और सरलीकृत किया)

फिर, एजेक्स अनुरोध के पूरा होने पर इसे पुन: निष्पादित करने के लिए निम्नलिखित तरीकों में से एक चुनें:

  1. प्राइमफैस कमांड बटन की oncomplete विशेषता का प्रयोग करें:

     oncomplete="applyChangeHandler()" 
  2. $(document).ready() बजाय <h:outputScript target="body"> उपयोग करें $(document).ready() ,

     <h:outputScript id="applyChangeHandler" target="body"> applyChangeHandler(); </h:outputScript> 

    और इसे update विशेषता में संदर्भित update :

     update=":applyChangeHandler" 
  3. उपयोग <p:outputPanel autoUpdate="true"> स्वतः प्रत्येक अजाक्स अनुरोध पर इसे अपडेट करने के लिए:

     <p:outputPanel autoUpdate="true"> <h:outputScript id="applyChangeHandler"> applyChangeHandler(); </h:outputScript> </p:outputPanel> 
  4. OmniFaces <o:onloadScript> उपयोग करें $(document).ready() बजाय $(document).ready() , <h:outputScript> और उन सभी पर

     <o:onloadScript>applyChangeHandler();</o:onloadScript>