在没有 ajax 的情况下提交时显示动画进度加载 gif

Question

我想在单击按钮时显示进度条，并在操作完成和 refreshes/navigates 页面时将其删除。

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

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

我的h:commandButton在h:form里面：

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

该操作运行良好，但我似乎无法弄清楚如何 hide/show 进度条图像。我错过了什么？

Answer 1

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

给定一个

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

您可以通过单击命令按钮来显示它，如下所示

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

页面刷新后，它将再次display:none。

在没有 ajax 的情况下提交时显示动画进度加载 gif

Show animated progress loading gif on submit without ajax

jsf

progress-bar

另请参阅：