Javascript不适用于jsf commandButton [重复]

Question

我有这个代码：

<h:commandButton value="Login as Administrator" id="login"
                        data-loading-text="Loading..." class="btn btn-primary"
                        action="#{adminController.loginAdmin}"/>

                    <script>
                         $('#login').on('click', function() {
                            var $btn = $(this).button('loading')
                            // business logic...
                            $btn.button('reset')
                        })
                    </script>

我不知道为什么我不能调用我的 javascript 函数。单击按钮时不会显示任何更改，它仅执行操作。我已经从 bootstrap javascript，部分按钮中获取了这个脚本。 http://getbootstrap.com/javascript/#buttons

感谢您的帮助。

Answer 1

由于您很可能有一个包裹按钮的表单并且表单是UINamingContainer，因此表单的 ID 将被添加到按钮之一。因此，HTML 中生成的 ID 将类似于 form:login，这就是未将事件监听器添加到按钮的原因。

您必须知道您在 XHTML 中编写的内容将由 JSF 解析，然后生成的 HTML 将发送给用户。所以你写的不是你在浏览器中看到的。

现在您可以查看生成的 HTML 以获取按钮的实际 ID 并使用该 ID。但是当您使用 JSF 时，最好使用 h:commandButton 的内置属性，即 onclick 并在那里指定一个 JS 函数来执行您想要在单击时执行的操作。也许您还想在操作完成时使用oncomplete 来重置按钮的标签。

<h:commandButton value="Login as Administrator" id="login"
   action="#{adminController.loginAdmin}" onclick="login()"/>

 <script>
   function login() {
     var $btn = $(this).button('loading');
     // business logic...
     $btn.button('reset');
   }
 </script>

您还应该知道data-loading-text 将无法通过 JSF 解析器，因此您不会在生成的 HTML 按钮上看到此属性。