How to execute a back bean method from a JavaScript function?

Question

How to execute a back bean method from a JavaScript function?

Navigation

#1 by (3 votes)

4

I'm developing a web page with canvas in HTML 5, it will be displayed in dashboards in real time, so I use ManagedBean to return their values, I have a component developed in JavaScript with its variable declared as global, and every 3 seconds should be updated its values through pool of the Primefaces, however this does not happen, the code is executed once only after rendering the page, as can be seen below in the generated code:

<script id="j_idt2:j_idt3_s" type="text/javascript">
    $(function() {
        PrimeFaces.cw("Poll", "widget_j_idt2_j_idt3", {
            id: "j_idt2:j_idt3",
            widgetVar: "widget_j_idt2_j_idt3",
            frequency: 2,
            autoStart: true,
            fn: function() {
                PrimeFaces.ab({
                    s: 'j_idt2:j_idt3',
                    f: 'j_idt2',
                    u: 'j_idt2',
                    d: 3,
                    onco: function(xhr, status, args) {
                        radial1.setValueAnimated(36.16220080628247);
                    }
                });
            }
        });
    });
</script>

How do I set the value of my object by calling a JavaScript method with a time interval in JavaScript by calling a ManageBean method?

<body onload="init()">
    <h:outputScript library="primefaces" name="jquery/jquery.js" />

    <h:form>
        <p:poll oncomplete  =   "radial1.setValueAnimated(#{mBeanTesteIsolado.teste})" listener="#{mBeanTesteIsolado.teste}" 
                autoStart   =   "true"
                delay       =   "3"
                update      =   "@form"
        />              

        <table>

            <tr>
                <td width="100%">
                    <canvas id="canvasRadial1" width="200" height="200">
                        No canvas in your browser...sorry...
                    </canvas>
                </td>
            </tr>

        </table>


    </h:form>

</body>


<script type="text/javascript">

     var radial1;

    function init()
    {
        // Define some sections
        var sections = Array(steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),
                             steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'),
                             steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)'));

        // Define one area
        var areas = Array(steelseries.Section(75, 100, 'rgba(220, 0, 0, 0.3)'));


        // Initialzing gauge
        radial1 = new steelseries.Radial('canvasRadial1', {
                                         gaugeType: steelseries.GaugeType.TYPE1,
                                         section: sections,
                                         area: areas,
                                         titleString: 'Title',
                                         unitString: 'Unit',
                                         threshold: 50,
                                         lcdVisible: true
                            });

        // O método abaixo deve ser executado eternamente, como sugerido usando pool, mas o fato de estar em uma função JavaScript
        // aparentemente não é possível
        gauge.setValueAnimated(#{mBeanTesteIsolado.teste});
    }
</script>

javascript java jsf primefaces

asked by anonymous 20.10.2014 / 20:26

1 answer

REST Fundamental Principles double hand encryption with fixed LENGTH

score 3 · Accepted Answer

The solution was:

Use p:poll of primefaces or a p:remoteCommand to invoke a action of Backing Bean.

<p:poll autoStart="true" listener="#{mBeanTesteIsolado.teste}"
        oncomplete="handleComplete(xhr, status, args)" interval="3" />

Or with p:remoteCommand :

<p:remoteCommand name="atualizarUI" actionListener="#{mBeanTesteIsolado.teste}" oncomplete="handleComplete(xhr, status, args)" />

In the case of p:remoteCommand , using a setInterval to call at regular intervals:

setInterval(function() { atualizarUI(); }, 3000);

Given the function assigned to oncomplete , in relation to your signature, you should accept 3 arguments ( xhr, status, args )

In the Backing Bean, use RequestContext.addCallbackParam to return data to the JavaScript function used in oncomplete , both p:poll and p:remoteCommand .

Setting the return of the Backing Bean to the Javascript function:

Managed Bean

public void teste() {
    // Processamento necessário

    RequestContext context = RequestContext.getInstance();

    // Adiciona as variáveis para o JS (variável args da assinatura)
    context.addCallbackParam("nomeDoAtributo", "valor");
}

Addressing the return in JavaScript:

JS

function handleComplete(xhr, status, args) {
    var nomeDoAtributo = args.nomeDoAtributo;

    // Atualizar UI
    gauge.setValueAnimated(nomeDoAtributo);
}