如何使用jQuery选择JSF组件？

Question

我正在尝试使用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" />

同

$("#check2").change(function() {
    if ($("#check2").is(":checked")) {
        $("#p2").hide();
    } else {
        $("#p2").show();
    }
});

以下是使用PrimeFaces/JSF的代码,它与jQuery无法正常工作:

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

同

$("#rad").change(function() {
    if ($("#rad:checked").val() == "one") {
        $("#p2").hide();
    } else {
        $("#p2").show();
    }  
});

Answer 1

您应该意识到jQuery与客户端的HTML DOM树一起使用.你在JSF源代码中编写的jQuery不能直接在JSF组件上工作,但是jQuery直接使用由那些JSF组件生成的HTML DOM树.您需要在webbrowser中打开页面并右键单击,然后单击View Source.你会看到一个JSF预先考虑与所有父的ID生成的HTML输入元件的ID NamingContainer的部件(如<h:form>,<h:dataTable>等)与:作为默认分隔符.所以举个例子

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

将最终生成的HTML作为

<form id="foo" name="foo">
    <input type="checkbox" id="foo:bar" name="foo:bar" />
    ...

您需要完全按该ID 选择元素.:然而,它是表示伪选择器的CSS标识符中的特殊字符.要:使用jQuery中的CSS选择器在ID中选择具有ID 的元素,您需要通过反斜杠转义它或使用[id=...]属性选择器或只使用旧的getElementById():

var $element1 = $("#foo\\:bar");
// or
var $element2 = $("[id='foo:bar']");
// or
var $element3 = $(document.getElementById("foo:bar"));

如果j_idXXX在ID中看到自动生成的部分XXX表示增量编号,则必须为特定组件指定固定ID,因为增量编号是动态的,并且可能会根据组件在树中的物理位置而发生更改.

作为替代方案,您也可以使用类名:

<x:someInputComponent styleClass="someClassName" />

最终以HTML格式结束

<input type="..." class="someClassName" />

这样你就可以得到它

var $elements = $(".someClassName");

这允许更好的抽象和可重用性.当然,这些元素并不是唯一的.只有标题,菜单,内容和页脚等主要布局元素才是真正独特的,但它们通常不是NamingContainer已经存在的.

作为另一种选择,您可以将HTML DOM元素本身传递给函数:

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

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

也可以看看:

• 我怎么知道JSF组件的id,所以我可以在Javascript中使用
• 如何在CSS选择器中使用JSF生成的带有冒号":"的HTML元素ID？
• 默认情况下,JSF生成不可用的ID,这与Web标准的css部分不兼容
• 在JSF复合组件中集成JavaScript,干净的方式

Answer 2

您还可以使用jQuery"Attribute Contains Selector"(这里是url http://api.jquery.com/attribute-contains-selector/)

例如,如果你有

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

并且你想在它的对象上做一些事情你可以选择它

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

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

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

为了知道元素的真实html标记,你总是可以使用firebug或者开发人员工具或查看源来查看真正的html元素(在这种情况下spinner被翻译成输入)...

丹尼尔.