如何使用jQuery选择JSF组件？

<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();
    }
});

<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();
    }  
});

#1 楼

您应该意识到jQuery在客户端与HTML DOM树一起工作。就像您在JSF源代码中编写的那样，jQuery无法直接在JSF组件上运行，但是jQuery可直接与由这些JSF组件生成的HTML DOM树一起使用。您需要在webbrowser中打开页面，右键单击，然后单击“查看源代码”。您会看到JSF在生成的HTML输入元素的ID之前加上所有父NamingContainer组件（例如<h:form>，<h:dataTable>等）的ID，并将:作为默认的分隔符。因此，例如，

<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=...]属性选择器，或者仅使用旧的getElementById()：

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

如果在ID中看到一个自动生成的j_idXXX零件，其中XXX代表一个增量编号，则必须给特定的组件一个固定的ID，因为该增量编号是动态的，并且会根据组件中的物理位置而变化。树。


作为替代，您也可以只使用一个类名称：

<x:someInputComponent styleClass="someClassName" />

以HTML结尾as

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

，因此您可以将其作为

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

使用，从而可以实现更好的抽象性和可重用性。当然，这些元素不是唯一的。只有主要的布局元素（如页眉，菜单，内容和页脚）才是真正唯一的，但是它们通常通常已经不在NamingContainer中。


作为另一种选择，您可以通过将HTML DOM元素本身放入函数中：

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

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

另请参阅：


我如何知道JSF组件的ID，以便可以在Javascript中使用
如何将JSF生成的HTML元素ID与冒号一起使用” ：“在CSS选择器中？
默认情况下，JSF生成无法使用的ID，这些ID与Web标准的CSS部分不兼容
以干净的方式将JavaScript集成到JSF复合组件中

#2 楼

您还可以使用jQuery“属性包含选择器”（此处是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标签，您可以始终查看真实html元素（在这种情况下，微调框是使用萤火虫或开发人员工具或查看源代码...翻译成输入...

Daniel。

#3 楼

如果使用RichFaces，则可以检查rich:jQuery组件。它允许您为jQuery组件指定服务器端ID。例如，您有一个具有指定服务器ID的组件，然后可以通过以下方式将任何与jQuery相关的内容应用到其中：

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

有关更多信息，请检查重复项。 br />
希望有帮助。

#4 楼

当我选择experience = yes时，弹出ID为dlg3的对话框，如果值为No，它将无法打开