How to refresh a script in <h:head> in JFS?

StackOverflow https://stackoverflow.com/questions/17882847

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>
Was it helpful?

Solution

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:

  1. Put values to hidden fields
  2. Update them by ajax call
  3. 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:

  1. Added two hidden fields for getting values from bean
  2. 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:

  1. Timer now will perform click on button, which will cause ajax request
  2. Hidden fields become updated by ajax
  3. After ajax success notification() will be called
  4. In notification() values for nroCasosPendientes and nroRecorPendientes will be taken from hidden fields
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top