JSF, refresh periodically a component with ajax?

前端 未结 2 1779
悲哀的现实
悲哀的现实 2020-12-10 03:04

I\'m working on an application JSF and i want to refresh periodically a component with ajax Like facebook notification zone behaviour. How can i do that?

相关标签:
2条回答
  • 2020-12-10 03:32

    Poll is what you need to use

    Poll component make ajax calls in a specified interval.

    For example Primefaces Poll

    <h:form id="form">
        <h:outputText id="txt_count" value="#{counterBean.count}" />
        <p:poll interval="3" listener="#{counterBean.increment}" update="txt_count" />
    </h:form>
    

    Link to showcase Primefaces Ajax Poll

    Pure JSF approach would be to use js timer that will invoke periodical document.getElementById('someFormId:idOfButton').click();

    or jquery $("#someFormId\\:idOfButton").click();

    while the button will look like this

    <h:commandButton id="idOfButton">
        <f:ajax render="txt_count"></f:ajax>
    </h:commandButton>
    

    something like this

    setInterval(function(){$("idOfButton").click()},3000);
    

    More about timer JavaScript Timing Events

    0 讨论(0)
  • 2020-12-10 03:48

    In RichFaces there is a poll component as well. Here is a nice example they provide

    <a4j:region>
          <h:form>
                <a4j:poll id="poll" interval="1000" enabled="#{userBean.pollEnabled}" reRender="poll,grid"/>
          </h:form>
    </a4j:region>
    
    <h:form>
          <h:panelGrid columns="2" width="80%" id="grid">
               <h:panelGrid columns="1">
                    <h:outputText value="Polling Inactive" rendered="#{not userBean.pollEnabled}" />
                    <h:outputText value="Polling Active" rendered="#{userBean.pollEnabled}" />
                    <a4j:commandButton style="width:120px" id="control" value="#{userBean.pollEnabled?'Stop':'Start'} Polling" reRender="poll, grid">  
                         <a4j:actionparam name="polling" value="#{!userBean.pollEnabled}" assignTo="#{userBean.pollEnabled}"/>
                    </a4j:commandButton>
              </h:panelGrid>
              <h:outputText id="serverDate" style="font-size:16px" value="Server Date: #{userBean.date}"/>
        </h:panelGrid>
    </h:form>
    
    0 讨论(0)
提交回复
热议问题