如何使用 jQuery 选择 JSF 组件? [英] How to select JSF components using jQuery?

问题描述

我正在尝试使用 PrimeFaces 和 JSF 组件实现 jQuery，但它无法正常工作.当我尝试对 HTML 标记执行相同操作时，它工作正常.

I am trying to implement jQuery with PrimeFaces and JSF components, but it's not working properly. When I tried to do the same with HTML tags it;s working properly.

这是带有 HTML 标记的代码，可与 jQuery 一起正常工作:

Here is the code with HTML tags which works properly with 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 一起正常工作:

Here is the code with PrimeFaces/JSF which doesn't work properly with 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();
    }  
});

推荐答案

您应该意识到 jQuery 与客户端的 HTML DOM 树一起工作.jQuery 不像您在 JSF 源代码中编写的那样直接在 JSF 组件上工作，但 jQuery 直接与由这些 JSF 组件生成的 HTML DOM 树一起工作.您需要在 webbrowser 中打开该页面并右键单击，然后查看源代码.您将看到 JSF 在生成的 HTML 输入元素的 ID 前面加上所有父 NamingContainer 组件(如<h:form>、<h:dataTable> 等)，使用 : 作为默认分隔符.比如

You should realize that jQuery works with the HTML DOM tree in the client side. jQuery doesn't work directly on JSF components as you've written in the JSF source code, but jQuery works directly with the HTML DOM tree which is generated by those JSF components. You need to open the page in webbrowser and rightclick and then View Source. You'll see that JSF prepends the ID of the generated HTML input elements with the IDs of all parent NamingContainer components (such as <h:form>, <h:dataTable>, etc) with : as default separator character. So for example

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

最终生成的 HTML 为

will end up in generated HTML as

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

您需要通过准确该 ID 来选择元素.: 是 CSS 标识符中的一个特殊字符，代表一个伪选择器.要使用 jQuery 中的 CSS 选择器选择 ID 中具有 : 的元素，您需要通过反斜杠对其进行转义或使用 [id=...] 属性选择器或只使用旧的 getElementById():

You need to select elements by exactly that ID instead. The : is however a special character in CSS identifiers representing a pseudo selector. To select an element with a : in the ID using CSS selectors in jQuery, you need to either escape it by backslash or to use the [id=...] attribute selector or just use the old getElementById():

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

如果您在 ID 中看到自动生成的 j_idXXX 部分，其中 XXX 表示增量数字，那么您必须为特定组件指定一个固定值ID，因为增量编号是动态的，并且会根据组件在树中的物理位置而变化.

If you see an autogenerated j_idXXX part in the ID where XXX represents an incremental number, then you must give the particular component a fixed ID, because the incremental number is dynamic and is subject to changes depending on component's physical position in the tree.

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

As an alternative, you can also just use a class name:

<x:someInputComponent styleClass="someClassName" />

最终在 HTML 中为

which ends up in HTML as

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

这样你就可以得到它

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

这允许更好的抽象和可重用性.这些元素肯定不是独特的.只有页眉、菜单、内容和页脚等主要布局元素是真正独特的，但它们通常不在 NamingContainer 中.

This allows for better abstraction and reusability. Surely those kind of elements are not unique. Only the main layout elements like header, menu, content and footer are really unique, but they are in turn usually not in a NamingContainer already.

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

As again another alternative, you could just pass the HTML DOM element itself into the function:

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

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

<小时>

另见:

• 我如何知道 JSF 组件的 id 以便在 Javascript 中使用
• 如何使用JSF 生成带有冒号:"的 HTML 元素 ID在 CSS 选择器中?
• 默认情况下，JSF 生成不可用的 id，与 web 标准的 css 部分不兼容
• 在JSF复合组件中集成JavaScript，简洁的方式

这篇关于如何使用 jQuery 选择 JSF 组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！