Bean에서 함수를 호출하기 전에 Javascript 함수를 실행하는 방법은 무엇입니까?

Question

거대한 JSF 프로젝트에 참여하고 있으며,이 질문에 대해 이해하기 쉽도록 가장 중요한 부분을 단축했습니다. 즉, 사용자는 등록 양식을 작성해야합니다.이 양식에서는 ID (identification)를 요청하고 "Completar registro"버튼을 클릭하여 commandButton을 통해 양식을 보내기위한 등록 확인을 요청하는 javascript 기능을 호출하고 "cargando"($ cargando) 모달. 요청이 서버에 도달하면 사용자는 등록되고 "cargando"($ cargando) 모달을 숨길 r_registrar javascript 함수를 실행합니다.

내 문제는 사용자가 ID (identificacion)를 쓰지 않으면 bean의 함수 registrar()가 호출되지 않으므로 문제가된다. 따라서 javascript 함수 r_registrar를 실행하지 않으므로 "cargando"모달은 숨기지 않습니다.

보낸 양식에 실수가 있는지 확인하고 싶습니다. 실수가있는 경우, "cargando"모달을 숨기고 싶습니다.

대단히 감사합니다.

Código XHTML :

<h:form id="formRegistrar"> 
     <h:panelGroup id = "pg_Registrar"> 

      <h:outputLabel class="output" id="outputIdentificacion" for="inputIdentificacion" value="Identificación"/> 
      <b:inputText class="input" id="inputIdentificacion" type="text" required="true" value="#{beanUsuario.usuarioSesion.identificacion}"/> 
      <div class="alert alert-danger"><h:message for="inputIdentificacion"/></div> 

      <b:commandButton id = "btnRegistrar" binding="#{beanUsuario.btnRegistrar}" style="display:none" class="btnRegistrar" value="" action="#{beanUsuario.registrar}"> 
       <f:ajax execute="pg_Registrar" render="pg_Registrar"/> 
      </b:commandButton> 
      <b:button value="Completar registro" class="btn btn-primary" onclick="registrar(); return false;"/> 

     </h:panelGroup> 
    </h:form> 

Código 콩 (자바) :

public void registrar(){ 
    try{ 
     bd_insertarUsuario(this.usuarioSesion); 
    }catch(Exception e){ 
     //... 
    }finally{ 
     RequestContext.getCurrentInstance().execute("r_registrar()"); 
    } 
} 

Código 자바 스크립트 :

는

var $cargando = $('<div class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:visible;"><div class="modal-dialog modal-m"><div class="modal-content"><div class="modal-header"><h3 style="margin:0;">Cargando</h3></div><div class="modal-body"><img width = "100%" class = "center-block" src = "../resources/imgs/loading.gif"/></div></div></div></div></div>'); 

function mostrarCargando() { 
    $cargando.modal(); 
} 

function ocultarCargando() { 
    $cargando.modal('hide'); 
} 


function registrar(){ 
    var c = confirm("seguro?"); 
    if(c){ 
      $(".btnRegistrar").click(); 
      setTimeout(mostrarCargando,100); 
    } 
} 

function r_registrar(){ 
    ocultarCargando(); 
} 

Answer 1

아마 simpliest 솔루션은 required 속성을 삭제하고 확인하는 것입니다 Java 메소드에서. 이렇게하면 JSF가 양식 전송을 방해하지 않으므로 입력이 유효하지 않은 경우에도 JavaScript 메소드를 호출 할 수 있습니다.

맞다면 입력이 어떻게 보이는지 상관없이 모달 대화 상자를 닫고 싶습니다. 그래서 또 다른 옵션은 백엔드 빈 메소드를 호출하기 전에 모달 대화 상자를 닫습니다입니다 : BTW

<b:commandButton id = "btnRegistrar" binding="#{beanUsuario.btnRegistrar}" style="display:none" class="btnRegistrar" value="" 
    onclick="ocultarCargando();ajax:beanUsuario.registrar()" 
    process="pg_Registrar" update="pg_Registrar"> 
     </b:commandButton> 

, 내가 BootsFaces b:commandButton과 f:ajax면을 혼합하지 않는 것이 좋습니다. BootsFaces에 이전 버전과의 호환성을 추가했지만 고통 스럽기 때문에 f:ajax이 항상 올바르게 작동하는지 모르겠습니다.