显示动画进度加载gif提交没有ajax

Question

我想在单击按钮时显示进度条，并在操作完成并刷新/导航页面时删除它。

我有一个h:panelGroup，其中我想显示图像:

<h:panelGroup id="progress">
    some progress bar image
</h:panelGroup>

我的h:commandButton在h:form内:

<h:commandButton value="submit" action="#{bean.action}"  />

这个动作很好，但我似乎不知道如何隐藏/显示进度条图像。我错过了什么?

Answer 1

因此，您基本上希望在 web浏览器向服务器发送表单提交请求并等待其响应之前显示它。实现这一目标的唯一方法是使用JavaScript操纵HTML DOM树。你可能已经知道，JSF只是一个HTML代码生成器，所有的web浏览器都有它的HTML DOM树，JavaScript在web浏览器中运行，能够监听UI事件，你可以在a.o.html元素的on*属性中指定。

了

<img id="progressbar" src="progress.gif" style="display:none" />

你可以在点击命令按钮时显示它，如下图

<h:commandButton ... onclick="document.getElementById('progressbar').style.display='block'" />

一旦页面刷新，它将再次成为display:none。

参见:

HTMLDog.com HTML教程HTMLDog.com JavaScript教程