如何使用jQuery选择JSF组件？

我试图用PrimeFaces和JSF组件实现jQuery，但它不能正常工作。当我尝试用HTML标签做同样的事情时；它工作正常

下面是使用HTML标记的代码，它可以与jQuery一起正常工作：

<input type="checkbox" id="check2"></input>
<h:outputText value="Check the box, if your permanent address is as same as current address."></h:outputText> 
<h:message for="checkbox" style="color:red" />

<p:selectManyCheckbox >
    <f:selectItem itemLabel="1" value="one" id="rad" ></f:selectItem>
</p:selectManyCheckbox>

下面是PrimeFaces/JSF的代码，它不能与jQuery一起正常工作：

<input type="checkbox" id="check2"></input>
<h:outputText value="Check the box, if your permanent address is as same as current address."></h:outputText> 
<h:message for="checkbox" style="color:red" />

<p:selectManyCheckbox >
    <f:selectItem itemLabel="1" value="one" id="rad" ></f:selectItem>
</p:selectManyCheckbox>

---

您应该意识到jQuery在客户端与HTMLDOM树一起工作。jQuery并不像您在JSF源代码中所写的那样直接作用于JSF组件，但是jQuery直接作用于由这些JSF组件生成的HTML DOM树。您需要在webbrowser中打开页面，右键单击，然后查看源代码。您将看到，JSF在生成的HTML输入元素的ID前面加上所有父组件（如

，

等）的ID，并将

：

作为默认分隔符。比如说

<h:form id="foo">
    <p:selectManyCheckbox id="bar" />
    ...

如果您在ID中看到一个自动生成的

j_idXXX

部分，其中

XXX

表示一个增量编号，那么您必须给特定组件一个固定的ID，因为增量编号是动态的，并且会根据组件在树中的物理位置而发生变化

---

或者，您也可以只使用类名：

<x:someInputComponent styleClass="someClassName" />

这允许更好的抽象性和可重用性。当然，这些元素并不是独一无二的。只有像页眉、菜单、内容和页脚这样的主要布局元素才是真正唯一的，但它们通常不在

NamingContainer

中

---

作为另一种选择，您可以将HTML DOM元素本身传递到函数中：

<x:someComponent onclick="someFunction(this)" />

---

另见：

---

您还可以使用jQuery“属性包含选择器”（这里是url）

例如，如果您有

 <p:spinner id="quantity" value="#{toBuyBean.quantityToAdd}" min="0"/> 

如果你想打印它的值，你可以这样做

alert(jQuery('input[id*="quantity"]').val());

为了知道元素的真正html标记，您可以始终使用firebug或ie开发人员工具或查看源代码查看真正的html元素（在本例中，spinner被翻译为输入）

丹尼尔。

---

看，当我选择experience=Yes时，这将帮助您弹出id为dlg3的对话框。如果值为No，它将不会打开。如果您使用的是RichFaces，您可以选中rich:jQuery组件。它允许您为jQuery组件指定服务器端id。例如，您有一个具有指定服务器id的组件，然后您可以通过下一种方式将任何与jQuery相关的内容应用于：

<rich:jQuery selector="#<server-side-component-id>" query="find('.some-child').removeProp('style')"/>

有关更多信息，请查看

---

希望有帮助。

很好的发现！更好的是，您可以使用“属性以选择器结尾”：它在PrimeFaces中类似：@（*[id$='IDUsedInPrimeFaces']）（这将允许您使用id=“IDUsedInPrimeFaces”选择组件，即使其客户端id更像id=“form:IDUsedInPrimeFaces”。）

<x:someComponent onclick="someFunction(this)" />

function someFunction(element) {
    var $element = $(element);
    // ...
}

 <p:spinner id="quantity" value="#{toBuyBean.quantityToAdd}" min="0"/> 

jQuery('input[id*="quantity"]')

alert(jQuery('input[id*="quantity"]').val());

<rich:jQuery selector="#<server-side-component-id>" query="find('.some-child').removeProp('style')"/>