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

因此，您基本上希望在之前显示，然后webbrowser将表单提交请求发送到服务器并等待其响应。实现这一目标的唯一方法是使用JavaScript操作HTML DOM树。您可能已经知道，JSF只是一个HTML代码生成器，所有webbrowser都掌握着HTML DOM树，并且JavaScript在webbrowser中运行，并且能够监听您可以在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。

另见：

HTMLDog.com HTML tutorials

HTMLDog.com JavaScript tutorials

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

1 个答案:

另见：