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

Question

我正在处理一个庞大的JSF项目，这个问题我缩短了最重要的部分，以便被理解。问题是，用户必须填写注册表格，在这种情况下需要填写身份证明（identificacion），并单击“Completar registro”按钮调用JavaScript函数请求注册确认，通过commandButton发送表单并显示“cargando”（$cargando）模态框。一旦请求到达服务器，用户就被注册，并且执行r_registrar JavaScript函数，它将隐藏“cargando”（$cargando）模态框。

我的问题是，如果用户没有填写他的身份证明（identificacion），那么bean中的registrar()函数将不会被调用，因此它不会执行JavaScript函数r_registrar，因此，“cargando”模态框不会隐藏。

我希望能够确定是否在发送的表单中存在任何错误。如果有错误，我希望“cargando”模态框隐藏。

非常感谢。

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>

Bean 代码（Java）:

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

JavaScript 代码：

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

- Juan Camacho

---

使用简单的JavaScript功能而不是使用任何JSF框架（如Richfaces，Primefaces等）提供的模态对话框功能和其他许多内容，是否有任何原因或限制？ - mikereem

@mikereem：b:button、btn和btn-primary类来自BootsFaces，因此使用了一个框架（我记得其中一个具有模态/对话框）。 - Kukeltje

这个有帮助吗：https://dev59.com/i2Af5IYBdhLWcg3wMwXX？ - Kukeltje

在这种情况下，“Completar registro”按钮应该简单地打开模态对话框，其中的确认按钮应该调用bean的registrar()方法并关闭模态对话框，无论注册器()方法的结果如何。我会将h:message简单放入表单中，并在需要时显示错误消息。因此，我不会为此编写任何自定义JavaScript方法，只需重新呈现页面上所需的元素即可。 - mikereem

参见：http://docs.oracle.com/javaee/7/javaserver-faces-2-2/jsdocs/symbols/jsf.ajax.html - Jasper de Vries

Answer 1

可能最简单的解决方案是删除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:commandButton 和 f:ajax facet。我已经为 BootsFaces 添加了向后兼容性，但这是很痛苦的，所以我不知道 f:ajax 是否总是能正常工作。

- Stephan Rauh