巧用Ajax4Jsf的oncomplete事件

巧用Ajax4Jsf的oncomplete事件

    笔者在最近的项目中采用的是Jsf(myfaces+richfaces+Ajax4Jsf)+Spring+Hibernate技术，由于数据量大，系统反应时间为1.5~2秒，此时需要有提示的标记比如"正在理..."等。Ajax4Jsf中的"onsubmit"为提交表单时发生的动作，"oncomplete"为提交到服务器端处理完返回到客户端时执行的动作，这两者的时间差就是我们等待的时间。我们也就是要在这个时间段内显示标记。对于<t:commandButton/>或<t:commandLink /> 等可以用"onclick""ondblclick"等与"oncomplete"组合灵活应用。以下是简例片段：

 1 <!--  执行的js方法  -->
 2 < script  type ="text/javascript" >
 3    function beforeChange(){
 4        var obj = document.getElementById('myForm:waitingGif');
 5        obj.style.display='block';
 6    }
 7    function afterChange(){
 8        var obj = document.getElementById('myForm:waitingGif');
 9        obj.style.display='none';
10    }
11 </ script >
12 <!--  应用  -->
13 < t:panelGrid  columns ="3"  id ="listGrid"  forceId ="true" >
14      < t:selectOneRadio  value ="#{myBean.selectItem}" >
15          < a4j:support  event ="onclick"
16             actionListener ="#{myBean.selectItemChange}"
17             reRender ="listGrid"  onsubmit ="beforeChange()"
18             oncomplete ="afterChange()"   />
19          < f:selectItem  itemLabel ="上月"  itemValue ="4"   />
20          < f:selectItem  itemLabel ="本月"  itemValue ="3"   />
21          < f:selectItem  itemLabel ="上周"  itemValue ="2"   />
22          < f:selectItem  itemLabel ="本周"  itemValue ="1"   />
23      </ t:selectOneRadio >
24      < h:graphicImage  id ="waitingGif"  value ="/images/waiting.gif"  style ="display:none"   />
25 </ t:panelGrid >

运行时的显示效果：


其实Ajax4Jsf也有对此效果的支持：

1 < a4j:status   startText ="正在处理"   startStyle ="font-size: 10pt;color:red;" />

页面上运用<a4j:status />后所有提交到后台的动作都可以被跟踪标记，但要保证<a4j:status />在此动作的刷新区域。