如何在从Bean调用函数之前执行Javascript函数?

时间:2016-09-05 01:59:14

标签: javascript jquery jsf bootsfaces

我正在研究一个巨大的JSF项目,对于这个问题,我缩短了最重要的部分,以便我能够理解。事实是,用户必须填写注册表格,在这种情况下请求其标识(标识)并点击“Completar registro”按钮调用javascript函数,该函数请求通过commandButton发送表单的注册确认并显示“cargando”($ cargando)莫代尔。一旦请求到达服务器,用户就会注册并执行r_registrar javascript函数,该函数将隐藏“cargando”($ cargando)模式。

我的问题是,如果用户没有写入其标识(标识),则不会调用bean中的函数registrar()。它不会执行javascript函数r_registrar,因此,“cargando”模式不会隐藏。

我希望我能确定发送的表格中是否有任何错误。如果出现错误,我希望隐藏“cargando”模式。

非常感谢。

CódigoXHTML:

    <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ódigoBean(java):

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

CódigoJavaScript:

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();
}

1 个答案:

答案 0 :(得分:0)

最简单的解决方案可能是删除required属性并在Java方法中检查它。这样,JSF不会阻止表单的发送,即使输入无效,也可以调用JavaScript方法。

如果我找到了你,你想要关闭模态对话框,无论输入是什么样的。所以另一种选择是在调用后端bean方法之前关闭模式对话框:

    <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:commandButtonf:ajax方面。我已经向BootsFaces添加了向后兼容性,但这很痛苦,所以我不知道f:ajax是否始终正常工作。