如何在 jquery 中引用 JSF 组件 Id？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7132061/
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 refer to a JSF component Id in jquery?
提问by Rajat Gupta
How do I refer to JSF components in jquery, as I dont know the id(s) prepended to the id of component I want to refer ?
我如何在 jquery 中引用 JSF 组件，因为我不知道要引用的组件的 id 前面的 id(s)？
回答by BalusC
You can give all NamingContainercomponents in the view such as <h:form>, <h:dataTable>, <ui:repeat>, <my:composite>a fixedID so that the HTML-generated client ID is safely predictable. If you're uncertain, just open the page in webbrowser, rightclick and do View Source. If you see an autogenerated ID like j_id123in the client ID chain, then you need to give exactly thatcomponent a fixed ID.
您可以为NamingContainer视图中的所有组件（例如<h:form>、<h:dataTable>、<ui:repeat>）提供<my:composite>一个固定ID，以便可以安全地预测 HTML 生成的客户端 ID。如果您不确定，只需在 webbrowser 中打开页面，右键单击并执行View Source。如果您j_id123在客户端 ID 链中看到一个自动生成的 ID ，那么您需要准确地为该组件提供一个固定 ID。
Alternatively, you can use #{component.clientId}to let EL print the component's client ID to the generated HTML output. You can use component's bindingattribute to bind the component to the view. Something like this:
或者，您可以使用#{component.clientId}让 EL 将组件的客户端 ID 打印到生成的 HTML 输出。您可以使用组件的binding属性将组件绑定到视图。像这样的东西：
<h:inputText binding="#{foo}" />
<script>
var $foo = $("[id='#{foo.clientId}']"); // jQuery will then escape ":".
// ...
</script>
This only requires that the script is part of the view file.
这只要求脚本是视图文件的一部分。
As another alternative, you could give the element in question a classname:
作为另一种选择，您可以为相关元素指定一个类名：
<h:inputText styleClass="foo" />
<script>
var $foo = $(".foo");
// ...
</script>
As again another alternative, you could just pass the HTML DOM element itself into the function:
作为另一种选择，您可以将 HTML DOM 元素本身传递给函数：
<h:inputText onclick="foo(this)" />
<script>
function foo(element) {
var $element = $(element);
// ...
}
</script>
回答by jonathan.cone
Check out the Attribute Contains Selectorif you're keen on using the ID as the selector. Then you can do something like:
如果您热衷于使用 ID 作为选择器，请查看属性包含选择器。然后你可以做这样的事情：
$('input[id*="mycomponentid"]').fadeIn();
Another option is to assign distinct CSS classes to the components you need to interact with in jQuery. I.e.
另一种选择是为需要在 jQuery 中交互的组件分配不同的 CSS 类。IE
$('.jsf-username-field').fadeIn();
If you use the later approach, you can allow the framework to generate IDs and you don't even need to bother with them most of the time, especially if you're using a nice AJAX-JSF framework. I favor this approach because it doesn't mingle HTML / JavaScript with JSF.
如果您使用后一种方法，您可以允许框架生成 ID，而且大多数时候您甚至不需要理会它们，尤其是当您使用一个不错的 AJAX-JSF 框架时。我喜欢这种方法，因为它不会将 HTML/JavaScript 与 JSF 混合在一起。
回答by Bozho
The id of the object is composed of its parents' ids. for example form1:button1. You can check how they are generated, and I think it is guaranteed not to change (but you'd better to specify explicit ids for all parents)
对象的 id 由其父母的 id 组成。例如form1:button1。你可以检查它们是如何生成的，我认为它保证不会改变（但你最好为所有父母指定明确的 id）
回答by Mike Braun
Use UIComponent.getClientId to get the actual Id of the component you're interested in.
使用 UIComponent.getClientId 获取您感兴趣的组件的实际 Id。
Render this ID on your page inside a javascript fragment (js function call, variable, whatever) so you can pick it up with jQuery.
将此 ID 呈现在您的页面上的 javascript 片段（js 函数调用、变量等）中，以便您可以使用 jQuery 获取它。
There are various ways to use EL on a Facelet to achieve this effect, but it largely depends on what you want: eg a single component's onclick handler, or a random component's Id in a script that executes at the bottom of the page...
有多种方法可以在 Facelet 上使用 EL 来实现这种效果，但这在很大程度上取决于您想要什么：例如，单个组件的 onclick 处理程序，或在页面底部执行的脚本中的随机组件的 Id...
回答by Gangnus
It is possible for JQuery to use id set by JSF variables directly.
JQuery 可以直接使用由 JSF 变量设置的 id。
For example, in JSF you have:
例如，在 JSF 中，您有：
<c:set var="radioId" value="#{groupId}_#{Id}_radio"/>
Later you use this ID for the radio button
稍后您将此 ID 用于单选按钮
And for the script you use:
对于您使用的脚本：
<script type="text/javascript">
$( "##{radioId}" ).change(function() {
alert( "radio changed" );
});
</script>
It works!
有用！
