Progress bar onLoad of jsp page

Get Started
1

Hello all,

I was wondering how to put a progress bar on load of jsp page.
Also I have html page that calls a servlet. It takes some time to run it.
So, is there a way to put a progress indicator while serlvet is doing work?

thanks

2

actually there are a few ways to accomplish this.
You could write some javascript that extends a bar (a colored div) and call out.flush after exery extending.

You can put a div with an animated gif on your page and hide it afterwards (agein using javascript, but I think you might be able to hide it using css too…)

Just make sure you get your response header right so it works in all browser (especially playing around with multipart content… but I dont know if that is still necessary)

3

are there any examples on line that you might recommend?

4

the only one I know right now is the one I programmed: you can see it in action when running setup.jsp from our cms (http://www.corinis.org ) - get the .zip version.

Basically what I did was:


<html>
<script>
function updatePercent(percent)
{
 var oneprcnt = 4.15;
 var prcnt = document.getElementById('prcnt');
 prcnt.style.width = percent*oneprcnt;
 prcnt.innerHTML = percent + " %";

}
</script>
<body>
<div style="width: 415px; height: 20px;background-color:white;	padding:0px;" id="status"><div id="prcnt" style="height:18px;width:30px;overflow:hidden;background-color:lightgreen" align="center">0%</div></div>
<%
//call my fist stuff
out.println("<script>updatePercent(" + 30 + ")</script>\
");
out.flush();
// the second part
out.println("<script>updatePercent(" + 30 + ")</script>\
");
out.flush();
// the fthird parth
out.println("<script>updatePercent(" + 30 + ")</script>\
");
out.flush();
//done
%>
<script>
document.getElementById("status").style.display = "none";
</script>
</body>

This definitely not as nice as just having an animated gif to disable… but it looks better and you get a better feeling of long it will need…

plus it doesnt work too well in ie…

Hope you get the idea

5

thanks, I’ll tak a look at this.

Here is what I did:
I put an animated gif on a page and when the user click submit button
I set style.display to block for the user to see the progress indicator BUT
the gif becomes not animated it freezes and progress is not moving.

what should I do?

thanks

6

You have to load the gif from the new page, not from the calling one. That’s the reason for the javascript/out.flush stuff.
If you put the animate gif on the page with the form it will always stop, because this page is actually not valid any more, so what you do is you give the browser a little piece of html real quick (the head until the <img tag) then you do an out.flush, so the browser really gets that stuff.

so at this moment the browser has something crippeled like


<html>
<body>
<img id="anim" src="animation.gif"/>
----snip (becuase you did an out.flush and you start with your jsp code now)

Since a browser can work with this code already he will display the animated gif (hey it has nothing else to do anyway right now) and when you push the rest of the page over the new you do a


<script>
document.getElementById("anim").style.display = "none";
</script>
</html>

to make the image (or div…) disappear!

7

thank you but unfortunately I did not understand what you mean :frowning:

I have an html page from which I submit some info to a servlet