Search code examples
javascriptajaxjsfhtmlopenfaces

How to have part of page periodically refresh with JSF and openfaces

Application is to display device distance to GPS coordinate on screen of mobile device browser.

HTML5 allows to get the coordinates from mobile but these need to be sent to server at periodic intervals, distance to target calculated and result displayed on webpage?

How to force JSF and OpenFaces page to periodically post h:inputHidden values and render h:outputText with ajax? Primefaces has p:poll component for this.

    <h:form id="coords">
        <h:inputHidden id="latitude" value="setByJavascript"></h:inputHidden>
        <h:inputHidden id="longitude" value="setByJavascript"></h:inputHidden>        
    </h:form>
    <h:outputText id="distance" value="#{bean.distance}"></h:outputText>
Solution

  • You can use the OpenFaces client-side API for invoking Ajax (O$.ajax.request() function) requests from inside of setInterval() function, like this:

    <body onload="setInterval(function() {
        O$.ajax.request(null, null, {
          execute: 'coords:latitude coords:longitude', 
          render: 'distance'});
        }, 10000)">
  <h:form id="coords">
  ...

    This code might require some tweaks but it shows the general idea of how this can be done.