jQuery 如何使用jQuery选择JSF组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7927716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select JSF components using jQuery?
提问by Karthikeyan
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.
我正在尝试使用 PrimeFaces 和 JSF 组件实现 jQuery，但它无法正常工作。当我尝试对 HTML 标签做同样的事情时，它工作正常。
Here is the code with HTML tags which works properly with jQuery:
这是带有 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();
}
});
Here is the code with PrimeFaces/JSF which doesn't work properly with jQuery:
下面是 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();
}
});
回答by BalusC
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 generatedby 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 NamingContainercomponents (such as <h:form>, <h:dataTable>, etc) with :as default separator character. So for example
您应该意识到 jQuery 在客户端使用 HTML DOM 树。jQuery 并不像您在 JSF 源代码中编写的那样直接在 JSF 组件上工作，但 jQuery 直接与由这些 JSF 组件生成的 HTML DOM 树一起工作。您需要在 webbrowser 中打开页面并右键单击，然后单击View Source。你会看到一个JSF预先考虑与所有父的ID生成的HTML输入元件的IDNamingContainer的部件（如<h:form>，<h:dataTable>等）与:作为默认分隔符。所以例如
<h:form id="foo">
<p:selectManyCheckbox id="bar" />
...
will end up in generated HTML as
最终会在生成的 HTML 中作为
<form id="foo" name="foo">
<input type="checkbox" id="foo:bar" name="foo:bar" />
...
You need to select elements by exactlythat 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():
您需要通过选择元素正是该ID来代替。:然而，它是代表伪选择器的 CSS 标识符中的一个特殊字符。要:在 jQuery 中使用 CSS 选择器选择 ID 中带有 a 的元素，您需要通过反斜杠对其进行转义或使用[id=...]属性选择器或仅使用旧的getElementById()：
var $element1 = $("#foo\:bar");
// or
var $element2 = $("[id='foo:bar']");
// or
var $element3 = $(document.getElementById("foo:bar"));
If you see an autogenerated j_idXXXpart in the ID where XXXrepresents an incremental number, then you mustgive 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.
如果您j_idXXX在 ID 中看到一个自动生成的部件，其中XXX表示一个增量编号，那么您必须为特定组件指定一个固定 ID，因为增量编号是动态的，并且会根据组件在树中的物理位置而发生变化。
As an alternative, you can also just use a class name:
作为替代方案，您也可以只使用类名：
<x:someInputComponent styleClass="someClassName" />
which ends up in HTML as
最终在 HTML 中作为
<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 NamingContaineralready.
这允许更好的抽象和可重用性。当然，那些元素并不是独一无二的。只有像页眉、菜单、内容和页脚这样的主要布局元素才是真正独特的，但它们通常并不在一个NamingContainer已经。
As again another alternative, you could just pass the HTML DOM element itself into the function:
作为另一种选择，您可以将 HTML DOM 元素本身传递给函数：
<x:someComponent onclick="someFunction(this)" />
function someFunction(element) {
var $element = $(element);
// ...
}
See also:
也可以看看：
回答by Daniel
You also can use the jQuery "Attribute Contains Selector" (here is the url http://api.jquery.com/attribute-contains-selector/)
您还可以使用 jQuery“属性包含选择器”（这里是网址http://api.jquery.com/attribute-contains-selector/）
For example If you have a
例如，如果你有一个
<p:spinner id="quantity" value="#{toBuyBean.quantityToAdd}" min="0"/>
and you want to do something on its object you can select it with
并且你想在它的对象上做一些事情，你可以选择它
jQuery('input[id*="quantity"]')
and if you want to print its value you can do this
如果你想打印它的值，你可以这样做
alert(jQuery('input[id*="quantity"]').val());
In order to know the real html tag of the element you can always look at the real html element (in this case spinner was translated into input) using firebug or ie developer tools or view source...
为了知道元素的真实 html 标签，您可以使用 firebug 或即开发人员工具或查看源代码查看真实的 html 元素（在这种情况下，spinner 被转换为输入）...
Daniel.
丹尼尔。
回答by nndru
If you're using RichFaces you can check rich:jQuerycomonent. It allows you to specify server side id for jQuery component. For example, you have component with specified server id, then you can apply any jQuery related stuff to in next way:
如果您使用 RichFaces，您可以检查rich:jQuerycomonent。它允许您为 jQuery 组件指定服务器端 id。例如，您有一个具有指定服务器 ID 的组件，那么您可以通过以下方式应用任何与 jQuery 相关的内容：
<rich:jQuery selector="#<server-side-component-id>" query="find('.some-child').removeProp('style')"/>
For more info, please check doumentation.
有关更多信息，请检查doumentation。
Hope it helps.
希望能帮助到你。
回答by umang naik
look this will help you when i select experience=Yes my dialoguebox which id is dlg3 is popup.and if value is No it will not open
当我选择 Experience=Yes 时，看起来这会对您有所帮助，我的 id 为 dlg3 的对话框是 popup.and 如果值为 No 则不会打开
