फायर चेंज-इवेंट मैन्युअल रूप से

Question

अरे मुझे मैन्युअल रूप से एक बदलाव-ईवेंट को फायर करने में समस्या है।

तो मेरे पास अलग-अलग मानों के साथ एक चयनऑनमेनू (मुझे जेएसएफ में ड्रॉपडाउन की तरह) है।

यदि मैं इस ड्रॉपडाउन-सूची का मूल्य चुनता हूं, तो एक डाटाटेबल अपडेट किया जाना चाहिए। यह सही ढंग से काम करता है, अगर मैं मैन्युअल रूप से यह मान चुनता हूं।

अब एक मामला है, जहां मुझे selectOneMenu में एक नया मान डालना होगा। यह नया मान स्वचालित रूप से चुना जाता है, लेकिन डेटाटेबल को अपडेट करने के लिए परिवर्तन-ईवेंट को निकाल दिया नहीं जाता है ...

तो मूल रूप से मेरे पास चयनऑनमेनू के लिए एक नया मान सहेजने के लिए यह बटन है जो तब सही तरीके से चुना जाता है, लेकिन datatable अद्यतन नहीं करता है, जिसके कारण मैं समारोह fireChange() लिखने का प्रयास किया और दे दी है कि बटन के oncomplete रहे हैं:

<p:commandButton ajax="true" id="seatingPlanSave" actionListener="#{EventAssistentController.createSeatingPlan}" value="#{msg.save}" update=":createEvent:EventSeatingPlan, :createEvent:ticketTypePrices" oncomplete="fireChange()"/> 

fireChange() के लिए - समारोह, मैं कुछ अलग बातें करने की कोशिश की :

function fireChange() { 
    var element = document.getElementById("createEvent:EventSeatingPlan_input"); 
    element.change(); 
} 


function fireChange() { 
    var element = document.getElementById("createEvent:EventSeatingPlan_input"); 
    $(element).trigger("change"); 
} 


function fireChange() { 
    if ("fireEvent" in element) 
     element.fireEvent("onchange"); 
    else { 
     var evt = document.createEvent("HTMLEvents"); 
     evt.initEvent("change", false, true); 
     element.dispatchEvent(evt); 
    } 
} 

लेकिन इनमें से कोई भी काम नहीं :(

क्या आप कृपया मुझे बता सकते हैं कि मैं इसे कैसे प्राप्त कर सकता हूं?

धन्यवाद, Xera

Answer 1

आपको पता है कि पर जे एस अवरोधन अनुमति देने का तरीका में, जबकि कि हमारे लिए अनिवार्य है createEvent:EventSeatingPlan_input के एचटीएमएल प्रतिनिधित्व के बारे में कुछ भी नहीं बताया (और आप!)। आपने या तो नहीं बताया था कि आप <h:selectOneMenu> या <p:selectOneMenu> का उपयोग कर रहे थे, इसलिए हम जेनरेट किए गए HTML प्रतिनिधित्व में खुद को न देख सकते हैं। पूर्व <select><option> उत्पन्न करता है जबकि उत्तरार्द्ध <div><ul><li> उत्पन्न करता है जो एक छिपा <select><option> के साथ इंटरैक्ट करता है। ड्रॉपडाउन मेनू के दोनों प्रस्तुतिकरणों में जेएस में एक अलग दृष्टिकोण की आवश्यकता होती है। साथ ही, change ईवेंट हैंडलर फ़ंक्शन को पंजीकृत करने के तरीके के बारे में जानकारी अनिवार्य है। क्या यह onchange विशेषता को सद्भावना दे रहा है, या <f:ajax> या <p:ajax> एम्बेड करके?

किसी भी तरह से, अब तक उपलब्ध कराई गई जानकारी के आधार पर, मैं लगता हूँ है कि आप एक

<h:selectOneMenu ...> 
    <f:ajax render="dataTableId" /> 
</h:selectOneMenu> 

जो एक <select onchange="..."><option> उत्पन्न होगा है।

अपने पहले प्रयास के अनुसार:

function fireChange() { 
    var element = document.getElementById("createEvent:EventSeatingPlan_input"); 
    element.change(); 
} 

यह <h:selectOneMenu> क्योंकि HTMLSelectElement इंटरफेस पर असफल हो जायेगी एक change संपत्ति है और न ही विधि नहीं है। इसके बजाए, यह onchange संपत्ति है जो एक ईवेंट हैंडलर लौटाती है जिसे सीधे () जोड़कर बुलाया जा सकता है।

निम्नलिखित <h:selectOneMenu> पर काम करेंगे:

function fireChange() { 
    var element = document.getElementById("createEvent:EventSeatingPlan_input"); 
    element.onchange(); 
} 

हालांकि इस वसीयत बारी में, <p:selectOneMenu> में असफल हो, क्योंकि यह देता है एक HTMLDivElement बजाय HtmlSelectElement।HTMLDivElement में onchange संपत्ति नहीं है जो एक ईवेंट हैंडलर लौटाती है। जैसा कि कहा गया है, <p:selectOneMenu><div><ul><li> विजेट उत्पन्न करता है जो एक छिपे हुए <select><option> के साथ इंटरैक्ट करता है। आपको जेएस संदर्भ में इस विजेट को पंजीकृत करना चाहिए और फिर इसके विशेष triggerChange() विधि का उपयोग करना चाहिए।

तो, दिए गए एक

<p:selectOneMenu widgetVar="w_menu" ...> 
    <p:ajax update="dateTableId" /> 
</p:selectOneMenu> 

इस

function fireChange() { 
    w_menu.triggerChange(); 
}