如何使用 jQuery 选择 JSF 组件？

Posted 2023-05-08

【中文标题】如何使用 jQuery 选择 JSF 组件？

【英文标题】：How to select JSF components using jQuery?

【发布时间】：2021-12-08 18:03:15

【问题描述】：

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

与

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

【参考方案1】：

您应该意识到 jQuery 在客户端与 HTML DOM 树一起工作。 jQuery 不像您在 JSF 源代码中编写的那样直接在 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 中为

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

这样你就可以得到它

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

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

---

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

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

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

---

另见：

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

【参考方案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 标记，您始终可以使用 firebug 或 ie 开发人员工具或查看源代码查看真实的 html 元素（在这种情况下，微调器被转换为输入）...

丹尼尔。

【讨论】：

很棒的发现！更好的是，您可以使用“属性以选择器结尾”：api.jquery.com/attribute-ends-with-selector，它在 PrimeFaces 中看起来像这样：“@(*[id$='IDUsedInPrimeFaces'])”（这将允许您选择 id= 的组件“IDUsedInPrimeFaces”，即使它的客户端 ID 更像 id="form:IDUsedInPrimeFaces"。）

【参考方案3】：

如果您使用的是 RichFaces，您可以查看rich:jQuery comonent。它允许您为 jQuery 组件指定服务器端 ID。例如，你有一个指定服务器 id 的组件，那么你可以将任何 jQuery 相关的东西应用到下一个方式：

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

更多信息，请查看doumentation。

希望对你有帮助。

【参考方案4】：

当我选择体验=是时，这将对您有所帮助