Show animated progress loading gif on submit witho

Question

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.

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

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

My h:commandButton is inside a 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?

Answer 1

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.

Given a

<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'" />

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

See also:

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