Проверка формы JSF с помощью Bootstrap modal - modal закрывается

Question

У меня возникла проблема с проверкой формы JSF в bootstrap modal. Это код из него:

<div id="loginmodal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
          <h1 class="text-center">Logowanie</h1> 
         </div> 
         <div class="modal-body"> 
          <h:form id="loginForm" class="form col-md-12 center-block"> 
           <div class="form-group"> 
            <h:inputText id="login" class="form-control input-lg" a:placeholder="Login" value="#{loginHelper.login}" required="true" requiredMessage="Pole &quot;login&quot; jest wymagane."> 
             <f:ajax event="blur" render="loginMessage"/> 
            </h:inputText> 
            <h:message id="loginMessage" for="login" style="color: red;"/> 
           </div> 
           <div class="form-group"> 
            <h:inputSecret id="haslo" class="form-control input-lg" a:placeholder="Hasło" value="#{loginHelper.haslo}" required="true" requiredMessage="Pole &quot;hasło&quot; jest wymagane."> 
             <f:ajax event="blur" render="hasloMessage"/> 
            </h:inputSecret> 
            <h:message id="hasloMessage" for="haslo" style="color: red;"/>   
           </div> 
           <div class="form-group"> 
            <p:commandButton class="btn btn-primary btn-lg btn-block" type="submit" value="Zaloguj" action="#{loginHelper.validate}" id="zaloguj"/> 
            <h:message for="zaloguj" style="color: red;"/> 
            <span class="pull-right"><a href="#" data-toggle="modal" data-target="#registermodal">Zarejestruj się</a></span> 
           </div> 
          </h:form> 
         </div> 
         <div class="modal-footer"> 
          <div class="col-md-12"> 
           <button class="btn" data-dismiss="modal" aria-hidden="true">Anuluj</button> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

Если я использую PrimeFaces р: CommandButton, диалоговое окно не закрывается, когда проверка не пройдена, но не отображается сообщение. С другой стороны, если я использую обычный h: commandButton, диалог всегда закрывается, и вся страница обновляется. После перезагрузки страницы сообщения о проблемах проверки отображаются в диалоговом окне, но мне нужно нажать кнопку, чтобы снова отобразить диалоговое окно.

Что я пытаюсь сказать, это то, что мне нужен простой способ предотвратить закрытие диалогового окна при ошибке проверки, а также динамически показывать ошибки проверки. Как я могу это достичь?

Answer 1

Проблема Основной причиной является перезагрузка после подать, так что вы можете по прибывшему это с помощью f:ajax, так как он не будет перезагружать страницу:

<h:commandButton value="Submit" > 
    <f:ajax render=":formId" listener="#{registerAction.register}"/> 
    </h:commandButton> 

И всякий раз, когда вы хотите автоматически закрыть модальный благодаря успешным подтверждено представить отрендерить panelGroup на этом panelGroup сделать js код, который закрывает модальное как следующее:

<h:panelGroup rendered=#{registerAction.submitSuccess}"> 
      <script> 
       $(document).ready(function() { 
       $('#registerModal').modal('hide'); 
       }); 
      </script> 
    </h:panelGroup> 

// registerAction.submitSuccess является булевой флаг выразить действительный г egisteration.