मैं जेएसएफ प्रबंधित बीन गुणों को जावास्क्रिप्ट फ़ंक्शन में कैसे पास करूं?

Question

मैं जानना चाहता हूं कि मैं जेएसएफ प्रबंधित बीन गुणों को जावास्क्रिप्ट फ़ंक्शन में कैसे पास कर सकता हूं।

कुछ इस तरह:

<script> 
    function actualizaMenu(key){ 
    #{linkedMenu.setKey(key)} 
    } 
</script> 

<ul> 
    <ui:repeat value="#{moduleList.modulos}" var="entity"> 
    <li> 
     <a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a> 
    </li> 
    </ui:repeat> 
</ul> 

Answer 1

यह ठीक नहीं JSF चर के "गुजर" है। यह सिर्फ जेएसएफ चरों को प्रिंट कर रहा है जैसे कि वे जावास्क्रिप्ट चर/मान हैं। आप जानते हैं, जेएसएफ और जेएस बिल्कुल सिंक में नहीं चलते हैं। जेएसएफ वेबसर्वर में चलता है और एचटीएमएल/सीएसएस/जेएस कोड उत्पन्न करता है जो बदले में वेबब्रोसर में चला जाता है।

आपकी ठोस समस्या सबसे अधिक संभावना है क्योंकि आपने जेएसएफ कोड को इस तरह लिखा है कि यह अमान्य जेएस वाक्यविन्यास उत्पन्न करता है। सत्यापित करने का एक आसान तरीका यह है कि जेएसएफ द्वारा जेनरेट किए गए एचटीएमएल आउटपुट को चेक करके, जिसे आप राइटक्लिक द्वारा पा सकते हैं, ब्राउज़र में स्रोत देखें, और यह जांचकर कि क्या आपको ब्राउज़र में जेएस कंसोल में कोई वाक्यविन्यास त्रुटि रिपोर्ट नहीं दिखाई दे रही है, आप क्रोम/आईई 9 +/फ़ायरफ़ॉक्स 23 + में एफ 12 दबाकर पा सकते हैं।

कल्पना कीजिए कि यहाँ #{entity.key}

<a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a> 

प्रिंट "foo" की तरह एक जावा स्ट्रिंग चर, तो उत्पन्न HTML की तरह

<a onclick="actualizaMenu(foo)">some name</a> 

लगेगा लेकिन हे, देखो, कि एक जावास्क्रिप्ट चर नामित का प्रतिनिधित्व करता है foo, जेएस स्ट्रिंग मान नहीं! तो अगर आप वास्तव में के रूप में अंतत

<a onclick="actualizaMenu('foo')">some name</a> 

खत्म करना चाहते हैं तो आप JSF हिदायत वास्तव में है कि HTML उत्पन्न करने के लिए करना चाहिए:

<a onclick="actualizaMenu('#{entity.key}')">#{entity.nombre}</a> 

हालांकि JSF चर में विशेष वर्ण से सावधान रहें। आप इसके लिए OmniFaces of:escapeJS() function का उपयोग कर सकते हैं।

---

असंबंधित ठोस समस्या के लिए, actualizaMenu() के ठोस कार्यान्वयन कोई मतलब नहीं है। आप एक बीन संपत्ति सेट करने का प्रयास कर रहे हैं। इसके लिए आपको जेएस का उपयोग नहीं करना चाहिए, बल्कि <h:commandLink> इसके बजाय।

<h:commandLink value="#{entity.nombre}" action="#{linkedMenu.setKey(entity.key)}" /> 

नेस्ट यदि आवश्यक हो तो एक <f:ajax> यह अतुल्यकालिक बनाने के लिए। ,

<script> 
    function actualizaMenu(key){ 
    /* Logic here ... */ 
    } 

    $(document).ready(function(){ 
    $('.menuItem').click(function(){ 
     var key = $(this).data('key'); 
     actualizaMenu(key); 
    ); 
    }); 
</script> 

...

<ul> 
    <ui:repeat value="#{moduleList.modulos}" var="entity"> 
    <li> 
     <a data-key="#{entity.key}" class="menuItem">#{entity.nombre}</a> 
    </li> 
    </ui:repeat> 
</ul> 

और के रूप में:

Answer 2

मैं घटना jQuery के साथ बंधन और तत्वों पर डेटा विशेषता का उपयोग कर एक ही परिणाम प्राप्त करने के लिए सिफारिश करेंगे (यह मानते हुए आप jQuery का उपयोग करें) अन्यत्र इंगित करें, जब तक कि #{linkedMenu.setKey(key)} वास्तव में जावास्क्रिप्ट का एक टुकड़ा नहीं लौटाता है (जो संभवतः सीम करता है और शायद यह भी बुरा होगा, भले ही यह किया गया हो) आपको फ़ंक्शन को ठीक करने की आवश्यकता है।

Answer 3

मुझे पता है कि यह प्रश्न पुराना है, लेकिन उन लोगों के लिए जो अभी भी एक विकल्प देख रहे हैं।

यदि आप प्राइमफेस का उपयोग कर रहे हैं तो बस इसे आज़माएं। Request Context