لا تعمل Primefaces و JavaScript و JSF بشكل جيد معًا أو هل أفعل شيئًا خاطئًا

Question

هذا شيء بسيط جدا

<p:commandLink value="Tom" onclick="document.getElementById('tom').focus()"/><br/>
<input id="tom"/>

عندما تنقر على TOM ، يحصل مربع النص على التركيز. رائع ، جرب هذا الآن

<p:commandLink value="Tom" onclick="document.getElementById('tom').focus()"/><br/>
<h:inputText id="tom"/> <br/>

عندما لا ينقر أي شيء يحدث ، أتحقق من Firebug ، أرى

document.getElementById("tom") is null

عندما أحاول استخدام jQuery $('#tom').focus(), ، لا شيء يحدث ، لا خطأ ، ولكن لم يتم التركيز أيضًا. هذا ال response (لست متأكدًا مما إذا كان هذا هو الاستجابة من الخادم) عندما أرى من Firebug

<?xml version="1.0" encoding="utf-8"?>
<partial-response>
    <changes>
       <update id="javax.faces.ViewState"><![CDATA[455334589763307998:-2971181471269134244]]></update>
    </changes>
    <extension primefacesCallbackParam="validationFailed">{"validationFailed":false}</extension>
</partial-response>

---

Answer 1

في JSF ، يتم تسبق معرف العناصر من خلال معرف النموذج الذي يحتوي عليها (بشكل أعم ، يتم تسبق معرفها من خلال معرف جميع المكونات الأصل التي تنفذ NamingContainer واجهه المستخدم). علي سبيل المثال:

<h:form id="myForm">
    <h:inputText id="tom" .../>

سيقوم بإنشاء رمز HTML التالي:

<input id="myForm:tom" ...>

للوصول إلى <input> يجب عليك استخدام myForm:tom معرف وليس tom معرف نفسه.

مع jQuery ، سيكون عليك استخدام $("myForm\:tom").focus();

Answer 2

سيقوم JSF بإعداد معرف UINamingContainer الأطفال (h:form, h:dataTable, ، إلخ) مع معرف UINamingContainer مكون نفسه. يمكنك تعطيل هذا عن طريق ضبط prependId يعزو إلى false.

<h:form prependId="false">

لن تتمكن فقط من تضمين نفس قطعة الكود في مكان آخر في نفس العرض. ضع ذلك في الاعتبار عند تعطيل هذا.

Answer 3

ومع PrimeFaces2 ، يجب عليك استخدام jQuery بدلاً من $ ، مثل هذا:

 <h:commandButton id="dome" value="提交" action="#{uInfo.doMe}">
  <f:ajax execute="@form" render="@form"/>
 </h:commandButton>
 ...
 <script type="text/javascript">
 function refresh() {
  jQuery("input#dome").click();
 }
 var t=setInterval('refresh()', 5000);
 </script>

Answer 4

تحتاج إلى إعطاء علامة JSF id السمة ، مثل هذا:

<h:inputText id="tom" />

وإلا فلن يتم عرضه باستخدام id, ، وهكذا لن يكون هناك id="tom" عنصر للعثور.

Answer 5

لا تنس أن PrimeFaces أيضًا ، دعنا نستخدم Attribute WidgetVar لربط مكونك بكائن JavaScript.

على سبيل المثال:

<p:inputText widgetvar="tom" id="tom" />

ثم في رمز JavaScript الخاص بك أو بعض رد اتصال JavaScript يمكنك القيام به:

tom.disable()

إلخ.