如何使用jQuery选择JSF组件？

Question

我试图用PrimeFaces和JSF组件来实现的jQuery，但它不能正常工作。当我试图做同样的HTML标记它; S正常工作。

下面是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树。 jQuery不会为你写的JSF源代码，而不是直接在JSF组件工作，但jQuery的直接与这是由那些JSF组件生成的HTML DOM树。您需要在网页浏览器，并右击打开页面，然后查看源文件。你会看到一个JSF预先考虑与所有父NamingContainer组件的ID（如<h:form>，<h:dataTable>等）生成的HTML输入元件与:作为默认分隔符的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"));

如果你看到在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);
    // ...
}

如何使用jQuery选择JSF组件？

问题描述投票：38回答：4

4个回答

See also:

最新问题

如何使用jQuery选择JSF组件？

问题描述 投票：38回答：4

4个回答

See also:

最新问题

问题描述投票：38回答：4