在不使用Ajax提交的情况下显示动画进度加载gif [英] Show animated progress loading gif on submit without ajax

问题描述

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

I want to show a progress bar when a button is clicked, and remove it when the action is finished and refreshes/navigates the page.

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

I have a h:panelGroup wherein I'd like to show the image:

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

我的h:commandButton在h:form内:

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

该操作正常，但是我似乎无法弄清楚如何隐藏/显示进度条图像.我想念什么?

The action works fine, but I can't seem to figure out how to hide/show the progress bar image. What am I missing?

推荐答案

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

So, you basically want to display it before the webbrowser sends the form submit request to the server and waits for its response. The only way to achieve that is manipulating the HTML DOM tree using JavaScript. You probably already know, JSF is just a HTML code generator and all the webbrowser has at hands it the HTML DOM tree, and that JavaScript runs in webbrowser and is able to listen on UI events which you can specify in a.o. HTML element's on* attribute.

给出一个

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

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

You can show it on click of a command button as below

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

页面刷新后，页面将再次变为display:none.

Once the page refreshes, it will be display:none again all by itself.

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

• HTMLDog.com HTML tutorials
• HTMLDog.com JavaScript tutorials

这篇关于在不使用Ajax提交的情况下显示动画进度加载gif的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！