Way to display an animated GIF while procedure is running?

February 20, 2008, 03:07 PM

mgrackin

The topic of wait messages has been discussed before but I'm not sure if animated GIFs was addressed. In short, I have not found a way to show animated GIFs on a wait page. The technique I use does not seem to work with animated GIFs. I think standard browser behavior stops animated GIFs when the browser window is told to go to antoher web page even if that web page (or report results) take some time to come back.

The following is some code to create a wait message page with the technique I use. Make the following changes to use it at your site.

1) Put the HTML files in a directory which can be reached by the web server.
2) Put the FOCEXEC in a directory that is in the APP PATH.
3) Change the word "tststuff" in the URL path in the RUNIT() function in WAITMENUPAGE.HTM to the directory where WAITMESSAGE.HTM is located.

WAITMENUPAGE.HTM

<HTML>
<HEAD>
<TITLE>Wait Message Menu</TITLE>

<SCRIPT>
function setapprndm() {
apprndm=Math.random();
document.THEDATA.WFS_apprndm.value=apprndm;
}

function preparefrm() {
setapprndm();
document.THEDATA.IBIF_ex.value =document.THEFORM.IBIF_ex.value;
runit();
}

function runit()
{
Today = new Date();
nmewindow = "win" + Today.getMinutes() + Today.getSeconds() +
Today.getMilliseconds();
optwindow = "toolbar=no,location=no,status=yes,menubar=yes," +
"scrollbars=yes,width=700,height=450,left=50,top=5,resizable=yes";
document.THEDATA.target = nmewindow;
rptwindow=window.open("/tststuff/waitmessage.htm",nmewindow,optwindow);
}
</SCRIPT>
</HEAD>

<body style="background-color:#3434ff">
<DIV ALIGN="center">

<FORM name="THEFORM" target="_blank">
<table>
<tr>
<td ALIGN="center"><b>Please select a report:</b></td>
</tr>
<tr>
<td ALIGN="center" valign="top">
<select name="IBIF_ex" size="5">
<option value="waitcarloop" SELECTED>Run a test FOCEXEC that takes a few seconds</option>
</td>
</tr>
<tr>
<td ALIGN="center" width="25%">
<input type="button" id="SUBBUTN" value="Submit" onclick="preparefrm();">
</td>
</tr>
</table>
</form>

<form name="THEDATA" action="/cgi-bin/ibi_cgi/webapi.dll" method="POST" target="_blank">
<input type="hidden" name="WFS_apprndm" value="">
<input type="hidden" name="IBIF_ex" value="">
</form>

</BODY>
</HTML>

WAITMESSAGE.HTM

<HTML>
<HEAD>
<TITLE>Processing your request, please wait.</TITLE>
</HEAD>
<SCRIPT>
function subit() {
window.opener.document.THEDATA.submit();
}
</SCRIPT>
<body onload="subit()">
<br><br>
<center><strong><font size=5 color='#800000'>
Your request is being processed.
<p></p>
Please wait...
</font></strong></center>
</BODY>
</HTML>

WAITCARLOOP.FEX

-REPEAT CARLOOP 100 TIMES
TABLE FILE CAR
PRINT RCOST DCOST
BY COUNTRY
BY CAR
BY MODEL
BY BODYTYPE
ON TABLE HOLD AS CARHOLD
END
-RUN
-CARLOOP

February 20, 2008, 05:26 PM

GreenspanDan

the "frozen" animated gif problem is Internet Explorer - specific. IE seems to stop all animation on a page when a form is submited, even before it receives any response. Firefox and other browsers, however, keep the gif running. For this reason, all my attempts to make an animated intermediate "wait" screen have been either ridiculously convoluted or a frozen-image failure :(

rather than having an intermediate wait screen with a "frozen" animated gif on it (in IE), i suggest adding the wait animation to your INPUT screen and making it invisible until the user hits "submit".

on our reports, this method works, and the animated gif is actually animated in all browsers.

the code would be something like:


<html>
<head>
<title>My Input Screen</title>

<script>
function doSubmit() {
    document.getElementById("waitDiv").style.visibility = "visible";
    document.submit();
}
</SCRIPT>
</head>
<body>

[all your inputs and stuff]

<input type="button" value="Submit Report" onClick="doSubmit();">

<div id="waitDiv" style="visibility: hidden">
   <img src="pleaseWait.gif"> 
</div>

</body>
</html>

although i suppose this only works if your result appears in the same window as your input screen.

theoretically you could still do this if your resultant report appeared in a new window or a different frame, but you would want to embed javascript in your report result to hide the DIV on the input screen, so that it would go away once the report loaded.

This message has been edited. Last edited by: GreenspanDan,

February 21, 2008, 03:49 AM

GamP

As for the 'frozen animation': there is a checkbox in IE7 that does this. I think it is set to default off with one of the latest auto-updates, not sure about that.
Anyway, go to Tools, Internet Options, tab Advanced, scroll down to MultiMedia and then enable the 'Play animations in webpages'. You'll have to restart IE for the change to take effect.

What we do to show a wait-page is to have two functions in javascript. The first displays the wait-page and sets a time out of 50 msec or some such low value to execute the second function which fires off the actual report which is targeted to the frame or window where the wait page is shown.

Hope this helps ...

February 21, 2008, 10:38 AM

mgrackin

GamP,

I originally used a technique like yours but found that sometimes the wait time was not long enough due to delays in loading the "Wait Message" page. This is when I created the technique I currently use. The key here is that the wait message page does the call to it's parent window to fire the execution of the report. That way the execution of the report will never start until the wait message has been loaded and displayed since it does the Submit action of the report request.

February 21, 2008, 11:56 AM

Tony A

quote:
Some of our users are impatient

Rob,

That's called bragging, that only "some" of your Users are impatient. Normally it's all of them

If you are running your reports via autoprompting then the solution mentioned by Hammo1j (this post) sounds useful.

If you are creating your own web pages then you are really going to have to resort to using JavaScript methods.

Mickey has already mentioned his method, there were some other very neat methods mentioned a while back.

Another such method would be to target the report into a child frame (Iframe or normal Frame). Place a standard "Please be Patient, Rome wasn't built in a day." message in a floating div or other HTML object, and then set up a timer to check the "readystate" of that frame to see if it has been set to "complete". When the "readystate" is "complete" then make the floating div hidden.

T

February 22, 2008, 06:56 AM

Lucas

I would use AJAX as Tony was hinting at.....
Here is a sample Ajax call that I use quite often to do just what you are asking about.

function getXMLHTTPRequest()
{
 try { req = new XMLHttpRequest(); }
 catch (err1) { try  { req = new ActiveXObject("Msxm12.XMLHTTP"); }
   catch (err2) { try { req = new ActiveXObject("Microsoft.XMLHTTP");}
     catch (err3) { req = false; } } }
  return req;
}
var http = getXMLHTTPRequest();

function getServerText(handPage)
{
	if (handPage.indexOf("?") < 0) var myurl = handPage +"?x=0";
	else var myurl = handPage;
	var myRand = parseInt(Math.random()*99999999999);
	var modurl = myurl + "&rand=" + myRand;
	http.open("GET", modurl, true);
	http.onreadystatechange = useHttpResponse;
	http.send(null);
}

function useHttpResponse()
{
	document.getElementById('reportDiv').innerHTML =  '<img src="the_url_of_the_gif"  />';
	if (http.readyState == 4)		
	{
		if (http.status == 200) document.getElementById('reportDiv').innerHTML =  http.responseText;      
		else document.getElementById('reportDiv').innerHTML = http.status;
	}
}

Just pass the URL of the form target to the getServerText function using a GET method and set a Div tag on the page with an ID of "reportDiv" the correct URL to the image and watch the magic happen.

In FOCUS since 1986	WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2
	WebFOCUS App Studio 8.2.06 standalone on Windows 10

- Using AS 8.2.01 on Windows 10 - IE11.
	in Focus since 1988