<a4j:jsFunction>调用从服务器返回未定义

Question

In my Managed Bean, I have a simple boolean method:

public class UploadBean {

    // ...

    public boolean getPossuiNotasFiscaisNaoTransmitidas() {
        boolean result = false;

        // Some computation ...

        return result;
    }

}

In my XHTML page, I am using RichFaces 3.3.3 tabPanel. In a specific tab I need make a confirmation to see if I really open it or not:

    <a4j:jsFunction name="possuiNotasFiscaisNaoTransmitidas" action="#{uploadBean.getPossuiNotasFiscaisNaoTransmitidas}" immediate="true" process="tab-10" ajaxSingle="true" reRender="tab-10"/>
    <a4j:loadScript src="../../js/orcamentoVistoria.js"/>
    <rich:tabPanel id="abas" switchType="ajax" >
        <!-- many tabs... -->
        <rich:tab 
                id="tab-10" 
                name="tab-10" 
                ontabenter="return prosseguirAbaNotasFiscais();"
                ontableave="return prosseguirAbaNotasFiscais();" >
            <!-- content -->
        </rich:tab>
    </rich:tabPanel>

The function prosseguirAbaNotasFiscais() in orcamentoVistoria.js calls the managed bean method:

function prosseguirAbaNotasFiscais() {
    console.info("prosseguirAbaNotasFiscais: Entrando");                                // LOG 1
    var serverResponse = possuiNotasFiscaisNaoTransmitidas();
    console.info("prosseguirAbaNotasFiscais: serverResponse? " + serverResponse);       // LOG 2
    var result = serverResponse ? confirm("Proceed?"): true;
    console.info("prosseguirAbaNotasFiscais: Resultado? " + result);                    // LOG 3
    return result;
}

What I expected : when I enter (or leave) in the tab, the page will call the managed bean method. If its answer was true, it will be asked to the user if she wants to continue to enter/leave. If its answer was false, so the tab will be directly entered/left.

What I really got : when I enter (or leave) in the tab, the page apparently calls the managed bean method. At least, in debug, I can see the method being executed (many times, actually). However, in the JS return ( LOG 2 line), the serverResponse variable is undefined. It is like the page was not waiting for the server response. Consequently the JS function will always return true and the tab always will be directly entered/left.

So, What should I do? Is it some specific attribute in <a4j:jsFunction> tag?

Thanks

Rafael Afonso

UPDATE 17/02/2016

@Makhiel, thanks for your suggestion. However, what I need is that by some way, after the execution of oncomplete , allow or not the tab change. But (at least from I could understand), it is possible only through ontabenter or ontableave from tab.

Following the Makhiel suggestion, I did the following suggestions in my code:

Managed Bean

public class UploadBean {

    private boolean questionarAbaNotasFiscais = false;

    // ...

    public boolean getPossuiNotasFiscaisNaoTransmitidas() {
        this.questionarAbaNotasFiscais = false;

        // Some computation. It can change questionarAbaNotasFiscais or not ...

        return this.questionarAbaNotasFiscais;
    }

    // ...

    public boolean isQuestionarAbaNotasFiscais() {
        return questionarAbaNotasFiscais;
    }
}

XHTML:

<a4j:jsFunction name="possuiNotasFiscaisNaoTransmitidas" action="#{uploadBean.getPossuiNotasFiscaisNaoTransmitidas}"
    data="#{uploadBean.questionarAbaNotasFiscais}" oncomplete="questionarAbaNotasFiscais = data; console.timeEnd('consulta');console.info('servidor retornou ' + questionarAbaNotasFiscais)"
    immediate="true" process="tab-10" ajaxSingle="true" reRender="tab-10"/>
<a4j:loadScript src="../../js/orcamentoVistoria.js"/>
<rich:tabPanel id="abas" switchType="ajax" >
    <!-- many tabs... -->
    <rich:tab 
            id="tab-10" 
            name="tab-10" 
            ontabenter="return prosseguirAbaNotasFiscais();"
            ontableave="return prosseguirAbaNotasFiscais();" >
        <!-- content -->
    </rich:tab>
</rich:tabPanel>

Java Script

var questionarAbaNotasFiscais = null;

function prosseguirAbaNotasFiscais() {
//  questionarAbaNotasFiscais = null;
    console.info("prosseguirAbaNotasFiscais: Entrando");
    console.time("consulta");
    var b = possuiNotasFiscaisNaoTransmitidas();

    console.info("prosseguirAbaNotasFiscais: Esperando retorno. b = " + b);
    console.time("watingReturn")
    while(typeof questionarAbaNotasFiscais === null) {
        // wait for return
    }
    console.timeEnd("watingReturn")
    console.info("prosseguirAbaNotasFiscais: respostaServidor? " + questionarAbaNotasFiscais);
    var result = questionarAbaNotasFiscais ? confirm(msgNotasNaoTransmitidas): true;
    console.info("prosseguirAbaNotasFiscais: Resultado? " + result);

    questionarAbaNotasFiscais = null;
    return result;
}

What I want : prosseguirAbaNotasFiscais() function calls possuiNotasFiscaisNaoTransmitidas() and wait until the global variable questionarAbaNotasFiscais is filled in oncomplete and proceed as waited. Once that in this declaration and at the end of prosseguirAbaNotasFiscais() function questionarAbaNotasFiscais is always setted to null , It is waited that always execute the loop above, finishing only when oncomplete be executed.

What I got : When prosseguirAbaNotasFiscais() is executed, calls the server function, but apparently is not waiting by server return. I observed that first the JS function is called, the page is reloaded and just then the server function is called.

Ok, the server function is executed async. So Is there some way to force to wait until the server function?

Thanks,

Rafael Afonso

Answer 1

var serverResponse = possuiNotasFiscaisNaoTransmitidas();

This will not work, a JavaScript method cannot directly execute a method on the server and give you back the result. What a4j:jsFunction does is send an AJAX request to the server and then the server sends back a response. It is asynchronous so yes the page is not waiting on the server (it would be bad if it did).

Instead of the returning a result from the bean method you save the result to a bean property, then you use @data:

<a4j:jsFunction data="#{bean.result}"
    name="possuiNotasFiscaisNaoTransmitidas" 
    oncomplete="if (data) {doSomething();}"
    … />

The "oncomplete" code will execute when the response comes back from the server.

I am not sure if the result value will be directly in the data variable, better check with console.log .