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

【问题标题】：How to execute a Javascript function before calling a function from Bean?如何在从 Bean 调用函数之前执行 Javascript 函数？
【发布时间】：2017-01-12 09:04:41
【问题描述】：

我正在处理一个巨大的 JSF 项目，对于这个问题，我缩短了最重要的部分，以便理解。问题是，用户必须填写一个注册表单，在这种情况下，它要求其身份（身份）并单击“完成注册”按钮来调用一个 JavaScript 函数，该函数请求注册确认以通过 commandButton 发送表单并显示一个“cargando”（$cargando）模式。一旦请求到达服务器，用户就会被注册并执行 r_registrar javascript 函数，该函数将隐藏“cargando”（$cargando）模式。

我的问题是，如果用户不写它的标识（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 Bean (java)：

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

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

【问题讨论】：

是否有理由或限制，您不能使用任何 jsf 框架（如 Richfaces、Primefaces 等），它会为您提供模式对话框功能以及许多其他东西，而不是使用简单的 javascript 函数?
@mikereem: b:button 和 btn 和 btn-primary 类来自 bootsfaces，因此使用了一个框架（iirc，有一个模态/对话框）
它有：showcase.bootsfaces.net/bootstrap/modal.jsf
这有帮助吗：*.com/questions/24912335/…?
在这种情况下，“Completar registro”按钮应该简单地打开模态对话框，确认按钮应该调用 bean 的 registrar() 方法并关闭模态对话框，无论 registrar() 方法是什么结果。我会将 h:message 简单地放入表单中，如果需要，它可以显示错误消息。所以我不会为此编写任何自定义 javascript 方法，只需在页面上重新呈现所需的元素。

标签： javascript jquery jsf bootsfaces

【解决方案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 是否总是正常工作。

【讨论】：