How to execute a Javascript function before calling a function from Bean?

Question

I'm working on a huge JSF project and for this question I've shortened the most important part so I can be understood. Thing is, the user must fill a registration form, which in this case requests its identification (identificacion) and to click on "Completar registro" button to call a javascript function that requests the registration confirmation for sending the form through the commandButton and show a "cargando" ($cargando) modal. Once the request reaches the server, the user is registered and it executes the r_registrar javascript function which will hide the "cargando" ($cargando) modal.

My problem is that if the user doesn't write its identification (identificacion), the function registrar() from bean won't be called and hence. it won't execute the javascript function r_registrar, therefore, the "cargando" modal doesn't hide.

I wish I could identify if there's any mistake in the sent form. In case there's a mistake, I want the "cargando" modal to hide.

Thank you very much.

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

Is there a reason or restriction that you cannot use any jsf framework (like Richfaces, Primefaces etc.) which would provide you the modal dialog functionality with a lot of other stuff, instead of using simple javascript functions? — mikereem, Sep 05 '16 at 05:41
@mikereem: `b:button` and the `btn` and `btn-primary` classes are from bootsfaces, so a framework is used (one that iirc, has a modal/dialog) — Kukeltje, Sep 05 '16 at 07:24
does this help: http://stackoverflow.com/questions/24912335/execute-javascript-before-and-after-the-fajax-listener-is-invoked? — Kukeltje, Sep 05 '16 at 07:37
In that case the "Completar registro" button should simply open the modal dialog which's Confirm button should invoke the registrar() method of the bean and close the modal dialog no matter what is the registrar() method outcome. I would put the h:message simply into the form and that could show the error message if needed. So I wouldn't write any custom javascript method for this, just rerender the required elements on the page. — mikereem, Sep 05 '16 at 07:52
See also: http://docs.oracle.com/javaee/7/javaserver-faces-2-2/jsdocs/symbols/jsf.ajax.html — Jasper de Vries, Sep 05 '16 at 08:45
Talking of the BootsFaces approach to JSF: instead of setting `class="btn btn-primary"`, you can simply use `look="primary"`. You can also replace the label with the label attribute of `b:inputText`. The latter is a bit buggy (it generates wrong Bootstrap code, which sometimes shows in broken layout), but that will be fixed with BootsFaces 1.0. — Stephan Rauh, Sep 05 '16 at 21:22

score 0 · Answer 1 · answered Sep 05 '16 at 21:16

Probably the simpliest solution is to drop the required attribute and check it in your Java method. This way, JSF doesn't prevent the form to be sent, and you can call the JavaScript methods even if the input is invalid.

If I've got you right, you want to close the modal dialog no matter what the input looks like. So another option is to close the modal dialog before calling the back-end bean method:

    <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>

BTW, I recommend not to mix BootsFaces b:commandButton and the f:ajax facet. I've added backward compatibility to BootsFaces, but it was painful, so I don't know if f:ajax always works correctly.

How to execute a Javascript function before calling a function from Bean?

1 Answers1