如何使用 jQuery 选择 JSF 组件？

发布于 2024-12-12 03:52:59 字数 978 浏览 0 评论 0原文

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

with

$("#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>

with

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

原文

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.

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" />

with

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

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>

with

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

世界等同你 2024-12-19 03:53:00

您应该意识到 jQuery 在客户端与 HTML DOM 树一起工作。 jQuery 并不像您在 JSF 源代码中编写的那样直接在 JSF 组件上工作，但 jQuery 直接在由这些 JSF 组件生成的 HTML DOM 树上工作。您需要在网络浏览器中打开页面并右键单击，然后查看源代码。您将看到 JSF 在生成的 HTML 输入元素的 ID 前面加上所有父元素 NamingContainer 组件（例如，等），以 : 作为默认分隔符。例如，

<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" />

，以便您可以将其获取为 as

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

这可以实现更好的抽象和可重用性。当然，这些元素并不是独一无二的。只有主要布局元素（如页眉、菜单、内容和页脚）确实是唯一的，但它们通常不在 NamingContainer 中。

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

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

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

另请参阅：

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" />
    ...

will end up in generated HTML as

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

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

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" />

which ends up in HTML as

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

so that you can get it as

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

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.

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);
    // ...
}

关于作者

恋你朝朝暮暮

暂无简介

0 文章

0 评论

503 人气

关注发私信

友情链接

文江博客

如何使用 jQuery 选择 JSF 组件？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

另请参阅：

See also:

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如何使用 jQuery 选择 JSF 组件？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

另请参阅：

See also:

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。