Ajax4jsf使用a4j:poll实现定时刷新

    技术2022-05-11  62

    版权所有:(xiaodaoxiaodao)蓝小刀 http://blog.csdn.net/xiaodaoxiaodao/archive/2007/02/05/1502563.aspx  

    转载请注明来源/作者

     

    Ajax4jsf使用a4j:poll实现定时刷新

     

    下面是使用a4j:poll简单实现一个站内短消息自动提示动能(类似很多asp论坛的页面顶部短消息提示)的关键代码。

    a4j:poll的使用文档可参考https://ajax4jsf.dev.java.net/nonav/documentation/ajax-documentation/

     a

    a4j:poll组件的声明:

    <html xmlns="http://www.w3.org/1999/xhtml"

          xmlns:c="http://java.sun.com/jstl/core"

          xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">

     

    <!--短消息提示代码开始-->

    <c:set var="observerEnabled" value="true"/>

     

    <h:form>

    <!--a4j:poll必须嵌入到h:form内部,否则不起作用-->

    <!--enabled属性指定是否允许自动检测(即a4j:poll是否有效),reRender指定重新渲染哪些组件,interval经过多少ms执行一次actiononcomplete指定action完成后客户端要执行的js方法-->

    <a4j:poll id="observer" enabled="#{observerEnabled}" action="#{basePage.observeNewShortMessage}"

              reRender="observer,promptMessageTop" interval="10000"

              oncomplete="observeNewShortMessage();"/>

        <script language="JavaScript">

        // 使用"//<![CDATA["的写法可在script内部使用"<"字符和"&"符号

        //<![CDATA[

        function observeNewShortMessage(){

            // todo to do something

        }

        //]]>

        </script>

    </h:form>

    <!--短消息提示代码结束-->

     

    页面顶部短消息提示内容:

    <div align="center" id="promptMessageRegionTop">

    <t:commandLink action="message.queryMgs" immediate="true">

    <!--basePage.observeNewShortMessage方法返回一个提示信息promptMessage-->

    <h:outputText id="promptMessageTop" value="#{basePage.promptMessage}" />

    </t:commandLink>

    </div>

     

     

    注意:a4j:poll只能重新渲染组件,如果需要在oncomplete后的js中做一些复杂逻辑,可考虑

    ① 把组件放在div

    <div id="promptRegion"><h:outputText id="prompt" value="#{basePage.prompt}" /></div>

    ② 在reRender中使用reRender="observer,prompt,promptMessageTop",重新渲染位于div中的h:outputText组件

    ③ 使用oncomplete="observeNewShortMessage();"指定action完成后客户端要执行的js方法

    function observeNewShortMessage(){

        // 下面取得divh:outputText的值,然后可以进行一些逻辑操作

        var prompt = document.getElementById("promptRegion").innerText;

            // todo to do something

    }

     

    最新回复(0)