Close alert message automatically 1

xsw1971 · Feb 3, 2003

I am using ColdFusion to display a screen that could take several minutes to build. The page does not begin to load until everything it needs has been pulled into memory and is ready to display.

Long story short, I would like to put an onclick event in the calling page that displays a simple pop-up message: "The following page may take a few minutes to load." By putting it in the calling page, it will be displayed immediately to the user. Problem is I don't want the user to have to click on the OK (in fact I don't even want an OK button, just a pop-up message). I would like it to go away on its own either when the called page is ready to be displayed or after x seconds.

I'm open to ideas if there is a better way to do this...

Thank you!
Jennie

sim777 · Feb 3, 2003

use window.open instead of alert. When the target page is complete, close this window.

Regards,
Sergey Smirnov

http://forum.exadel.com

xsw1971 · Feb 3, 2003

Thank you for the reply, Sergey.

I am not very experienced with JavaScript...how do I close the window once my target window is open? I assume there is a window.close function as well? In which page do I put it and how do I reference the popup window?

Thanks for your help,
Jennie

EdwardMartinIII · Feb 3, 2003

Hi Jennie,

Here's a way to do it.

Here's a rudimentary HTML document:

Code:

<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
     &quot;[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>[/URL]

<html xmlns=&quot;[URL unfurl="true"]http://www.w3.org/1999/xhtml&quot;[/URL] xml:lang=&quot;en&quot; lang=&quot;en&quot;>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;></meta>
    <title>JavaScript Sample</title>
    <script src=&quot;Sample.js&quot; type=&quot;text/javascript&quot;></script>
  </head>
  <body>
    <input type=&quot;button&quot; value=&quot;Press me to pop open the warning window.&quot; onclick=&quot;Warning('open');return false;&quot;></input>
    <br /><br />
    <input type=&quot;button&quot; value=&quot;Press me to close the warning window.&quot; onclick=&quot;Warning('close');return false;&quot;></input>
  </body>
</html>
[\code]

Note that it calls an external script.  It doesn't have to, but for this example, I can keep the code cleaner.

Here's the external script, which is saved as &quot;Sample.js&quot;:
[code]
function Warning(Argument)
  {
    if(Argument==&quot;open&quot;)
      {
        Win_Warning = window.open('Warning.html','Win_Warning','top=50,screenY=50,left=50,width=500,height=100,scrollbars=no,scrollbar=no,menubar=no');
        setTimeout(&quot;Warning('close')&quot;,5000)
      }

    if(Argument==&quot;close&quot;)
      {
        if (Win_Warning.closed+&quot;&quot; == &quot;false&quot;)
          {
            Win_Warning.close();
          }
        else
          {
          }
      }
  }

Now, your window-opening button will probably be labelled something else, such as "Start the complicated process..." and you won't have a window-closing button. However, somewhere in your script, when the complicated process is over, it'll call Warning('close'). If the window has already been timed out, nothing will happen. If the window is still open, it'll close it.

The setTimeout is set for 5000 milliseconds, but you can set it for whatever you like, really.

I ran this bad boy. Works great.

Good luck!

Edward "Do not read this sentence."

EdwardMartinIII · Feb 3, 2003

Oh, I totally forgot the following file, which is saved as "Warning.html". This is your warning file, of course:

Code:

<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
     &quot;[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>[/URL]

<html xmlns=&quot;[URL unfurl="true"]http://www.w3.org/1999/xhtml&quot;[/URL] xml:lang=&quot;en&quot; lang=&quot;en&quot;>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;></meta>
    <title>Warning</title>
  </head>
  <body>
    <p><b>Note:</b> This process might take a few minutes to run...</p>
  </body>
</html>

Cheers,

Edward "Do not read this sentence."

xsw1971 · Feb 3, 2003

Edward,

That works so awesome! You get a star! [thumbsup2]

Thanks,
Jennie

xsw1971 · Feb 4, 2003

Edward, I spoke too fast! I cannot get it to work when I have separate files.

In my calling page I have:

Code:

<head>
  <title></title>
  <script src=&quot;Sample.js&quot; type=&quot;text/javascript&quot;></script>
</head>
<body>
  <form action=&quot;reviewInvoice.cfm&quot; method=&quot;post&quot; name=&quot;f_current_inv&quot;>
    <input type=&quot;Submit&quot; value=&quot;Current Invoice&quot; onclick=&quot;Warning('open'); document.f_current_inv.submit();&quot;>
  </form>
</body>
</html>

I took out the "return false;" statement because I want it to submit the form. My warning file looks just like yours above above but I decided to not have it time out - I want it to display until the called page loads.

In my reviewInvoice.cfm document I added

Code:

<script src=&quot;Sample.js&quot; type=&quot;text/javascript&quot;></script>

to the head tag and

Code:

onload=&quot;Warning('close');return false;&quot;

to the body tag, but when the page loads it does not close the warning window and the javascript error on the page says "'Win_Warning' is undefined".

It would be fine if I let the warning window close automatically, but I decided if a page takes several minutes to load, I don't want the user to think it hung - I'd like to keep the warning message until the next page loads.

Help!

Thanks,
Jennie

mwolf00 · Feb 4, 2003

Here's a popwindow that self closes

<script>
var timeLeft = 31 //seconds
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
function closeWin(message){
window.resizeTo(20,20)
window.opener.focus()
if (message != "&quot

{
window.opener.alert (message)
}
locName = window.opener.location
window.opener.location = locName
self.close()
}
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
function startTimer(){
timeLeft --
if (timeLeft < 0) {
closeWin("&quot

}
minsLeft = Math.floor(timeLeft / 60)
secsLeft = timeLeft - (minsLeft * 60)
if (secsLeft < 10){
secsLeft = "0" + secsLeft
}
document.pageForm.timer.value = minsLeft + ":" + secsLeft
timerID = setTimeout("startTimer()",1000)
}
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
function moreTime(){
clearTimeout(timerID)
timeLeft = 121
startTimer()
}
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</script>
<style>
body {font-family: arial; text-align:center;}
input {font-family: arial;}
</style>
<body onload="startTimer()" onUnload="locName = window.opener.location; window.opener.location = locName">
<form name="pageForm">

<h4>Would you like to change your password?</h4>
Minimum 5 characters<br>
Password: <input type=password name=pass1><br>
Confirm: <input type=password name=pass2><br>
<input type=button onClick='subForm()' value='Submit'> this function removed for clarity
<input type=button onClick='moreTime()' value='More Time'>
<input type=button onClick='closeWin(""Thank You"&quot

' value='Close'><br>"
Time left before window closes: <input name=timer id=timer readonly size=5 style='border: 0px;'>

</form> Get the Best Answers! faq333-2924
Is this an asp FAQ? faq333-3048

mikewolf@tst-us.com

xsw1971 · Feb 4, 2003

Mike, that's pretty cool - thanks for the post.

However, I think I've decided not to close the window automatically - I'd like it to close when the called page opens, but I can't tie them all together (see my post from above.)

Jennie

mwolf00 · Feb 4, 2003

How's this.
page1 posts an alert window then calls page2 which closes the window....

page1.cfm
<script>
fuction subForm(){
window.open("alertWin.htm","alertWin&quot

alertWin.focus()
document.myForm.action = "page2.cfm"
document.myForm.submit()
}
</script>
<input type=button onClick="subForm()" value="Submit">

page2.cfm
<script>
function loaded(){
self.focus()
alertWin.close()
}
</script>
<body onLoad="loaded()">

Get the Best Answers! faq333-2924
Is this an asp FAQ? faq333-3048

mikewolf@tst-us.com

xsw1971 · Feb 4, 2003

Mike, that didn't work. I get an "object expected" error on page1.cfm (I can't submit the form.) JS errors are miserably lacking in detail, so I'm not sure what's going on (or not going on).

There's nothing else going on in the page, just this code.

Jennie

mwolf00 · Feb 4, 2003

If it's just this code you need to put a form on the page...

<script>
function subForm(){ //had a a typo in "function"
window.open("alertWin.htm","alertWin&quot

//make sure you have a page named "alertWin.htm" or you'll just get a page not found display
alertWin.focus()
document.myForm.action = "page2.cfm"
document.myForm.submit()
}
</script>
<form name="myForm">
<input type=button onClick="subForm()" value="Submit">
</form> Get the Best Answers! faq333-2924
Is this an asp FAQ? faq333-3048

mikewolf@tst-us.com

mwolf00 · Feb 4, 2003

Just ran a test. This is the easiest method. It's all on the called page that takes a while to load. Sorry for the asp rather than coldFusion..

<% @language=vbs %>
<%
option explicit
response.expires = 0
%>

at the very start of the page
<script>
testWin = window.open("yourMessageWindowPage.htm","myWin&quot
</script>
<%
'execute your long page load functions here
%>

<script>
function closeWin(){
testWin.close()
}
</script>
<body onLoad="closeWin()">
Get the Best Answers! faq333-2924
Is this an asp FAQ? faq333-3048

mikewolf@tst-us.com

EdwardMartinIII · Feb 4, 2003

Hi Jennie,

First, the only thing you really needed to do to kill the auto-timeout is to change

Code:

setTimeout(&quot;Warning('close')&quot;,5000)

to

Code:

// setTimeout(&quot;Warning('close')&quot;,5000)

in Sample.js.

I think you have to specify the entire hierarchy when you address Win_Warning from a different window. When you address it from the window which created it, there's an implied "child-of-me" or "self.", but when some stranger-window attempts to address it, the automatic "child-of-me" prefix doesn't resolve to anything meaningful. So, you have to explicitly specify Win_Warning's address. What that means is that you can't refer to "Win_Warning" from that other window -- you have to refer to AppWindow.Win_Warning, where AppWindow is the name of the window that created Win_Warning.

I don't know, but this feels like it might be the right direction.

Good luck!

Edward "Do not read this sentence."

xsw1971 · Feb 4, 2003

Mike, still no dice.

The first way: I did have a form on the page, but I forgot to name it myForm. I changed it and when I hit submit, it did open the alert window, but it never submitted the form (ie, it never got to page2.cfm) The alert window just sits there.

The second way: I have never used ASP so I'm not sure what to do with <%%> code. I tried just putting the testWin and function closeWin in the called file, and it never showed the alert window until the page was fully loaded. By that time it had already called on the closeWin function so it closes it as soon as it opens it.

I appreciate your ideas - I hope I can figure out some way to make one of them work for me!

Jennie

mwolf00 · Feb 4, 2003

Sorry, my last post may not solve the problem. It only helps if a page takes a long time to display after the server sends it. Stick with my other idea (If you like it)... I will run a test on it tomorrow. I think that I may need to rename the window object... Get the Best Answers! faq333-2924
Is this an asp FAQ? faq333-3048

mikewolf@tst-us.com

xsw1971 · Feb 4, 2003

Hi Mike,

Between yours and Edwards ideas I think we can solve this. I've got it working well using both of your ideas, the only problem is getting the new window to reference the popup window as Edward suggested in his last post.

I am very new to JS and the O'Reilly book is like reading calculus - they don't provide many examples. How do I assign a window name to the page1.cfm so that page2.cfm can reference page1_window_name.alert_window_name?

I apologize if my questions seem rather basic...

Jennie

xsw1971 · Feb 4, 2003

I got it to work! I got to thinking about the timing of the 2nd page load - it doesn't take a long time to load the page as theres no images or anything complex about it. It takes a long time to come back from the server because it has several query-intensive database calls.

Therefore, all I needed to do was put

Code:

Warning('close');

in the onunload event of the 1st page. The warning message will sit there until the 2nd page is actually ready load. Yea!

Again, thanks for your guys' help!!

Jennie

EdwardMartinIII · Feb 4, 2003

Oh. Page 2 closes Page 1 when it's done?

Well, good you got it working!

Cheers,

Edward "Do not read this sentence."

xsw1971 · Feb 4, 2003

No, actually page 1 opens popup 1 then becomes page 2...

Jennie

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Close alert message automatically 1

Programmer

Programmer

Programmer

Technical User

Technical User

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Technical User

Programmer

Programmer

Programmer

Programmer

Technical User

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor