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，section按钮获取此脚本。 http://getbootstrap.com/javascript/#buttons

感谢您的帮助。

Answer 1

由于您最有可能有一个包装按钮的表单而且表单是UINamingContainer，因此表单的ID将被添加到按钮之一。因此，HTML中的结果ID将类似于form:login，这就是为什么事件修复程序未添加到按钮中的原因。

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

现在，您可以查看生成的HTML以获取按钮的实际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按钮上看到此属性。

Javascript不适用于jsf commandButton

1 个答案: