How to refresh a script in in JFS?

Question

Good Morning

I am working with Web APIs Notifications in Google Chrome the problem is: I have a script in the head of my xhtml page that retrieves values from a database through a managed bean and this process has to be done on a timer (interval) every 10 seconds, the first time it works fine but sometimes does not return the following values in the database, but instead continues to show the value to recover the first time.How I can do to make increasingly running the interval the values again recover starting in the managed bean from database My code is as follows I hope to help.

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:ice="http://www.icesoft.com/icefaces/component"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ace="http://www.icefaces.org/icefaces/components">
<h:head>
   <script>

    if (!window.webkitNotifications) 
    {
        alert('Lo sentimos, su navegador no soporta notificación de escritorio. Trabaje con Google Chrome.');
    }

    function RequestPermission (callback)
    {
        window.webkitNotifications.requestPermission(callback);
    }

    function getNroCasosPendientes()
    {
        var nroCasosPendientes = '#{ControladorBk.getNroCasosPendientes()}';

        return nroCasosPendientes;
    }

    function getNroRecordatoriosPendientes()
    {
        var nroRecorPendientes = '#{ControladorBk.getNroRecordatoriosPendientes()}';

        return nroRecorPendientes;
    }

    function abrirVentana(url) 
    {
        var height = screen.availHeight-30;
        var width  = screen.availWidth-10;
        var left   = 0;
        var top    = 0;

        settings   = 'fullscreen=no,resizable=yes,location=no,toolbar=no,menubar=no';
        settings   = settings + ',status=no,directories=no,scrollbars=yes';
        settings   = settings + ',width=' + width +',height=' + height;
        settings   = settings + ',top=' + top +',left=' + left;
        settings   = settings + ',charset=iso-8859-1';
        var win    = window.open(url, '', settings);

        win.outerHeight = screen.availHeight;
        win.outerWidth  = screen.availWidth;

        win.resizeTo(screen.availWidth, screen.availHeight);

        if (!win.focus)
        {
            win.focus();
        }

        return win;
    }

    function notification ()
    {               
        if (window.webkitNotifications.checkPermission() > 0) 
        {
            RequestPermission(notification);
        }

        var icon               = 'http://entidades.com/images/img999.png';
        var title              = 'AVISO'; 
        var nroCasosPendientes = getNroCasosPendientes();
        var nroRecorPendientes = getNroRecordatoriosPendientes();

        if(nroCasosPendientes != '0' || nroRecorPendientes != '0')
        {
            var body               = 'Tienes '+nroCasosPendientes+' Casos y '+nroRecorPendientes + ' Recordatorios pendientes.';
            var popup              = window.webkitNotifications.createNotification(icon, title, body);
            popup.show();
            setTimeout(function()
            {
                popup.cancel();
            }, '5000');

            popup.onclick = function() 
            {
                abrirVentana('http://localhost:8080/Proyect/faces/Page.xhtml');
            };
        }       
     }

     var timer = setInterval(function() 
     {
        notification();
     }, 10000);

    </script>
</h:head>

n1k1ch · Accepted Answer · 2013-07-26T15:05:01.723

Plain javascript is executing at the client side.

Expressions like "#{ControladorBk.getNroCasosPendientes()}" - at server side.

So, you need to make a call to server to update "nroCasosPendientes" and "nroRecorPendientes"

You can achieve this by:

Put values to hidden fields
Update them by ajax call
Get updated values in javascript

So, in html you need to add following code:

<h:form>
    <h:inputHidden id="hiddenCasos"
        value="#{ControladorBk.getNroCasosPendientes()}"/>
    <h:inputHidden id="hiddenRecordatorios"
        value="#{ControladorBk.getNroRecordatoriosPendientes()}"/>

    <h:commandLink id="btnUpdate"
        style="display: none">
        <f:ajax render="hiddenCasos hiddenRecordatorios"
            onevent="performNotification"/>
    </h:commandLink>
</h:form>

As you can see:

Added two hidden fields for getting values from bean
Added invisible button for performing ajax request

In <script> you need to made some changes:

    <script>
    //your code

    //add this...
    function updateBean() {
        document.getElementById("btnUpdate").click();
    }

    //...and this
    function performNotification(data) {
    if(data.status === 'success') {
        notification();
        }
    }

    //...change this
    function notification() {
        //your code

        //get values from hidden fields
        var nroCasosPendientes = document.getElementById("hiddenCasos").value;
        var nroRecorPendientes = document.getElementById("hiddenRecordatorios").value;
    }

    //...and change this
    var timer = setInterval(function{
        updateBean();
    }, 10000);
</script>

So, the changes are:

Timer now will perform click on button, which will cause ajax request
Hidden fields become updated by ajax
After ajax success notification() will be called
In notification() values for nroCasosPendientes and nroRecorPendientes will be taken from hidden fields

How to refresh a script in in JFS?

1 Answers1