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

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

对象的id由其父id组成。例如

form1:button1

。您可以检查它们是如何生成的，我认为保证不会更改（但最好为所有父级指定显式Id）

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

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

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

如果您喜欢使用Id作为选择器，请查看。然后，您可以执行以下操作：

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

另一个选项是为jQuery中需要交互的组件分配不同的CSS类。即

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

如果使用后一种方法，您可以允许框架生成ID，并且在大多数情况下您甚至不需要为它们操心，特别是如果您使用的是一个很好的AJAX-JSF框架。我喜欢这种方法，因为它不会将HTML/JavaScript与JSF混合在一起

您可以为视图中的所有组件（如

，

，

，

）提供一个固定的ID，以便可以安全地预测HTML生成的客户端ID。如果不确定，只需在webbrowser中打开页面，右键单击并查看源代码。如果在客户端ID链中看到自动生成的ID，如

j_id123

，则需要为该组件提供一个固定的ID

或者，您可以使用

#{component.clientId}

将组件的客户端ID打印到生成的HTML输出中。可以使用组件的

binding

属性将组件绑定到视图。大概是这样的：

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

var$foo=$（“[id='{foo.clientId}']”）；//jQuery随后将转义“：”。
// ...

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

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

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

变量$foo=$（“.foo”）；
// ...

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

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

函数foo（元素）{
变量$element=$（element）；
// ...
}

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

例如，在JSF中，您有：

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

稍后，您将此ID用作单选按钮

对于您使用的脚本：

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

$（“#{radioId}”）.change（function（）{
警报（“无线电更改”）；
});

---

它起作用了

Id

即使您对xhtml做了一个小的更改，也会发生更改&将DOM结构中的Id提供给所有组件真是糟糕透了。。也许应该有更好的方法..抱歉..事实上我很沮丧JSF没有提供一个正确的方法来做到这一点。。在查看生成的HTML后，在代码中使用生成的ID对我来说不是一个很好的方法。。当您对代码进行一些更改时，它就会中断&使用类名很容易，但我不喜欢仅仅为此创建大量的类。另一种方法是向DOM结构上的所有组件提供ID，这也过于繁忙（被迫写入所有ID:（）我没有找到更好的方法，但是这些解决方案对我来说并不是很好，因此我正在寻找更多的答案。但是到目前为止，因为没有更好的方法，&你列出了所有可行的方法，我想我应该接受你提出的解决方案，直到我找到更好的方法来解决这个问题像RichFaces和PrimeFaces这样的组件库提供了通过ID更容易地引用JSF组件的方法生成对具有正确客户端ID的DOM元素的jQuery调用。例如，PrimeFaces在几个组件上有一个

widgetVar

属性，该属性将对DOM元素的jQuery引用直接放在全局JS范围内。但无论如何，如果您想要比JSF允许的更细粒度地控制视图，那么JSF可能不是您需要什么。另请参阅。这已经回答了。您对服务器端web开发有一个主要的基本误解。要开始，请在webbrowser中打开JSF页面，右键单击并选择“查看页面源代码”。在和#{radiod}的位置周围盯着它看只要你有一点启发。你的方法只是略有不同，因为你已经更改了默认的命名容器分隔符。下面是值得阅读的：@BalusC我知道我可以使用硬设置ID。但我不需要它们。问题的作者也是。至于你的参考，这很有趣，谢谢你u、 它是关于主题的，但不包含问题的答案……至于误解，是的，我不怕承认对某个主题的了解很少。你呢？顺便说一句，我的解决方案是有效的。@BalusC现在我已经理解了你的答案。这是正确的，对不起。（但我从未否决过它）