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, кнопки раздела. http://getbootstrap.com/javascript/#buttons

Спасибо за помощь.

Answer 1

Как вы, скорее всего, имеете форму, обертывающую кнопку, а форма - UINamingContainer, идентификатор формы будет добавлен к одной из кнопок. Таким образом, полученный идентификатор в HTML будет чем-то вроде form:login, и именно поэтому eventlistener не добавляется к кнопке.

Вы должны знать, что то, что вы пишете в XHTML, будет проанализировано JSF, а затем сгенерированный HTML будет отправлен пользователю. Так что вы пишете не то, что вы видите в браузере.

Теперь вы можете взглянуть на сгенерированный HTML, чтобы получить фактический идентификатор кнопки и использовать ее. Но поскольку вы используете 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.