如何使用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树一起工作.就像您在JSF源代码中编写的那样，jQuery无法直接在JSF组件上运行，但是jQuery可直接与由这些JSF组件生成生成的HTML DOM树一起使用.您需要在网络浏览器中打开页面，然后右键单击，然后查看源代码.您将看到JSF在生成的HTML输入元素的ID之前加上所有父

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");

这允许更好的抽象和可重用性.当然，这些元素不是 unique .只有主要的布局元素(如页眉，菜单，内容和页脚)才是真正唯一的，但它们通常已经不在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生成了带有冒号:"的HTML元素ID.在CSS选择器中?
• 默认情况下， JSF生成无法使用的ID，这与Web标准的CSS部分不兼容
• 以干净的方式将JavaScript集成到JSF复合组件中

---

See also:

• How can I know the id of a JSF component so I can use in Javascript
• How to use JSF generated HTML element ID with colon ":" in CSS selectors?
• By default, JSF generates unusable ids, which are incompatible with css part of web standards
• Integrate JavaScript in JSF composite component, the clean way

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