巧用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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
运行时的显示效果:
其实Ajax4Jsf也有对此效果的支持:
1
<a4j:status startText="正在处理
" startStyle="font-size: 10pt;color:red;"/>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](http://www.blogjava.net/Images/dot.gif)
页面上运用<a4j:status />后所有提交到后台的动作都可以被跟踪标记,但要保证<a4j:status />在此动作的刷新区域。