[CODE] A simple "Please Wait" message WITH an animated image!

April 21, 2008, 11:48 AM

Francis Mariani

The Launch HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Launch</title>

<script type="text/javascript">
function fnSubmit()
{
// Construct the Report window's features ----------------------------
var vFeatures = "menubar=yes,toolbar=no,status=yes,resizable=yes,scrollbars=yes";

// Open a new window and display "Please Wait" HTML page -------------
wfReport = window.open("/approot/baseapp/wait1.html", "wfReport",vFeatures);
wfReport.focus();
// Move the window to the top left corner of the screen
wfReport.moveTo(0,0);
// Resize the window to the screen size
wfReport.resizeTo(screen.availWidth,screen.availHeight);

// Submit the report after 500 milliseconds --------------------------
// The 500 milliseconds is to allow wait1.html to load
// After the submit is performed, the animated gif is replaced by itself
// It becomes animated again!
setTimeout("document.forms[0].submit(); wfReport.document.images['clock'].src = wfReport.Image1.src;", 500);
}
</script>

</head>

<body>
<form method="post" target="wfReport" action="/ibi_apps/WFServlet">
<input type="hidden" name="IBIF_ex" value="test1.fex">
<input type="button" value="Run Fex" onClick="fnSubmit();">
</form>
</body>
</html>

The "Please Wait" HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Please wait...</title>

<script type="text/javascript">
//Preload wait image into memory ---------------------------
var Image1 = new Image();
Image1.src = 'http://i32.tinypic.com/244cmfc.gif';
</script>

</head>
<body>
<div style="margin-top: 100px; text-align: center;">
<span style="font-family: Arial, sans-serif; font-size: .9em; color: navy;">
Please wait for the report to display</span><br><br>
<img name="clock" src="http://i32.tinypic.com/244cmfc.gif">
</div>
</body>
</html>

I saved these files in the baseapp app folder.

Run the launch page in a web browser:

http://server-name/approot/baseapp/launch1.html

In IE 6 and earlier (I'm guessing), the image stops being animated when the form is submitted. (It seems to work without problems in Firefox 2). To solve this problem, I pre-load the image into memory and then, after the form is submitted, I reload the image. This makes the image animated after form submission. This is done in the launch page:

document.forms[0].submit(); wfReport.document.images['clock'].src = wfReport.Image1.src;

The image (http://i32.tinypic.com/244cmfc.gif) is available for you to download.

I've tested this on IE 6 and Firefox 2.

This message has been edited. Last edited by: Francis Mariani,

April 21, 2008, 01:06 PM

smiths

Thanks for sharing that with us Francis!

Regards,
Sean

April 21, 2008, 01:54 PM

dhagen

Francis,

Doesn't an animated gif that has the hour hand ticking away set the wrong expectations?

April 21, 2008, 01:57 PM

Francis Mariani

d,

I agree!

Here are some others:

http://www.sevenoaksart.co.uk/Sevenoaks_Art_metal.htm

The hand cuffs are interesting!

May 30, 2008, 03:33 PM

shravan

Francis,

Is there any way of displaying the "Please Wait..." message without opening a new window ? I am asking because, if there is a pop up blocker, that window will never open.

Thanks.

Shravan

May 31, 2008, 12:50 AM

Francis Mariani

This relies on the please wait message placed in a new window, it cannot work in the same window, because after replacing the current location with the please wait message, you can't submit the form, it isn't there any more.

The blocker can be configured to allow popups from the WebFOCUS server.

July 16, 2008, 05:20 PM

Francis Mariani

Here is code that uses an iframe to display a report - no new window:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Launch</title>

<script type="text/javascript">
function fnSubmit()
{
wfReport.location = "/approot/testfm/wait1.html";

// Submit the report after 500 milliseconds --------------------------
// The 500 milliseconds is to allow wait1.html to load
// After the submit is performed, the animated gif is replaced by itself
// It becomes animated again!
setTimeout("document.forms[0].submit();wfReport.document.images['clock'].src = wfReport.Image1.src;", 500);
}
</script>

</head>

<body>
<form method="post" target="wfReport" action="/ibi_apps/WFServlet">
<input type="hidden" name="IBIF_ex" value="test1">
<input type="hidden" name="IBIAPP_app" value="testfm">
<input type="button" value="Run Fex" onClick="fnSubmit();">
</form>

<iframe name="wfReport" width="800" height="600"
        frameborder="1" scrolling="auto">
</iframe>

</body>
</html>

The animated image stays animated until the report is displayed.

I've tested this on IE 6 and Firefox 3.

This message has been edited. Last edited by: Francis Mariani,

September 16, 2008, 11:37 AM

stuey

Francis,

Just wanted to say thanks for this - nice and simple, suits my brain capacity !

November 16, 2010, 04:08 AM

ExoR

hi Francis! Thank you for this thread! it's very useful!!!

I've added 2 or 3 things that I want to share

 
            <script type="text/javascript">
                  function fnSubmit()
                  {
                  wfReport.location = "/html/Wait.asp";

                  // Submit the report after 500 milliseconds --------------------------
                  // The 500 milliseconds is to allow wait1.html to load
                  // After the submit is performed, the animated gif is replaced by itself
                  // It becomes animated again!
                  setTimeout("document.forms[0].submit();wfReport.document.images['clock'].src = wfReport.Image1.src;", 500);
       		  var fr = document.getElementById ("wfReport");
      		  fr.style.display="inline"
                  }
                 function ifrHide(){
       		  var fr = document.getElementById ("wfReport");
      		  fr.style.display="none";
                 }
           </script>

the function ifrHide() hides the iframe, and when the function fnSubmit() will be called, the iFrame will be shown with the default value "inline"

 
<Body onload="ifrHide()">
 <form name="initform" method="post" action="\ibi_apps\WFServlet" target="wfReport" >
  .
  .
  .
  .
  .
  <input type='button' value='Procedi' onClick="fnSubmit();" >
 </form>
 <iframe name="wfReport" width="100%" height="100%" frameborder="0" scrolling="auto" style="position:absolute; top:0px; left:0px">
  </iframe>

on body load: the iframe will be hidden
on button click: the iframe will be revealed over the form, hiding it, and the form submitted
the iframe position is on the absolute upper left corner of the page

so the sensation will be that the report will be displayed in a new page

i've tested this with IE7

thank you again
ciao

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