Question

如何在jquery中引用JSF组件，因为我不知道我想要引用的组件的id前面的id？

Answer 1

您可以在视图中提供所有NamingContainer个组件，例如<h:form>，<h:dataTable>，<ui:repeat>，<my:composite> 已修复 ID，以便HTML生成的客户端ID可以安全地预测。如果您不确定，只需在webbrowser中打开页面，右键单击并执行查看源。如果您在客户端ID链中看到自动生成的ID，例如j_id123，那么您需要准确地为组件提供固定ID。

或者，您可以使用#{component.clientId}让EL将组件的客户端ID打印到生成的HTML输出中。您可以使用组件的binding属性将组件绑定到视图。像这样：

<h:inputText binding="#{foo}" />
<script>
    var $foo = $("[id='#{foo.clientId}']"); // jQuery will then escape ":".
    // ...
</script>

这只要求脚本是视图文件的一部分。

作为另一种选择，您可以为相关元素指定一个类名：

<h:inputText styleClass="foo" />
<script>
    var $foo = $(".foo");
    // ...
</script>

再一次，你可以将HTML DOM元素本身传递给函数：

<h:inputText onclick="foo(this)" />
<script>
    function foo(element) {
        var $element = $(element);
        // ...
    }
</script>

Answer 2

如果您热衷于使用ID作为选择器，请查看Attribute Contains Selector。然后你可以做类似的事情：

$('input[id*="mycomponentid"]').fadeIn();

另一种选择是将不同的CSS类分配给需要在jQuery中与之交互的组件。即。

$('.jsf-username-field').fadeIn();

如果您使用后面的方法，您可以允许框架生成ID，您甚至不需要在大多数时间使用它们，特别是如果您使用的是一个很好的AJAX-JSF框架。我赞成这种方法，因为它没有将HTML / JavaScript与JSF混合在一起。

Answer 3

对象的id由其父对象组成。例如form1:button1。您可以检查它们是如何生成的，我认为保证不会更改（但您最好为所有父项指定显式ID）

Answer 4

使用UIComponent.getClientId获取您感兴趣的组件的实际ID。

在页面上的javascript片段（js函数调用，变量，等等）中呈现此ID，以便您可以使用jQuery来获取它。

有多种方法可以在Facelet上使用EL来实现这种效果，但它在很大程度上取决于你想要的东西：例如单个组件的onclick处理程序，或者在页面底部执行的脚本中的随机组件的Id ...

Answer 5

JQuery可以直接使用JSF变量设置的id。

例如，在JSF中你有：

  <c:set var="radioId" value="#{groupId}_#{Id}_radio"/>

稍后您将此ID用于单选按钮

对于您使用的脚本：

            <script type="text/javascript">
                $( "##{radioId}" ).change(function() {
                    alert( "radio changed" );
                });
            </script>

有效！

如何在jquery中引用JSF组件ID？

5 个答案: