Home > .net 2.0, JavaScript, Visual Studio 2005, Visual Studio 2008 > JavaScript Popup Reminder OnBeforeUnload Control for Multiple Browsers

JavaScript Popup Reminder OnBeforeUnload Control for Multiple Browsers

September 23, 2007

I’m putting the finishing touches on a grading application for work and needed a “reminder” for people to save.  Internet-based (*laugh* computer-based even) technologies are still fairly new in our organization.  I try to keep the bleeding out of bleeding edge—especially when teachers are involved.

One requirement was to have a way to remind users BEFORE they close the window.  That’s easy enough using the onbeforeunload event in JavaScript.  But, in the end, I’m not much for placing the exact same code on every page—even if it’s copy and pasting or associating a single JS file (which is what I had been doing in the past).

So, I dumped the JS into our framework library and made a control out of it.  Very generic, but it works for now.  It also works in IE6, IE7, and FireFox2, at least that’s what I’ve tested so far.

The control itself has one public property—PromptText.  This is, as it sounds, the text that will be displayed in the pop-up prompt.

Popup in Internet Explorer 7.0

Internet Explorer 7.0’s popup.

Popup in Fire Fox 2.0

FireFox 2.0’s popup.

To implement this control, override the RenderContents method with:

rotected override void RenderContents(HtmlTextWriter output)

{

string scriptKey = “bodyOnBeforeUnloadScript”;

       StringBuilder sbScript = new StringBuilder();

 

sbScript.Append(“<script language=JavaScript>\n”);

 

       // The Internet Explorer-only version (catches IE5ish and back).

       sbScript.Append(“window.onbeforeunload = function() { window.event.returnValue = ‘” + PromptText + “‘; }\n”);

           

       // The FireFox and IE7 (ala DOM) version).

       sbScript.Append(“window.onbeforeunload = function() { return(‘” + PromptText +“‘); }\n”);

           

       sbScript.Append(“</script>\n”);

 

       this.Page.ClientScript.RegisterStartupScript(this.GetType(), scriptKey, sbScript.ToString());

}

The PromptText property is a string property—implemented as normal in the control.

On the .ASPX page, simply drag/drop the control onto the page and set the PromptText property.

<cc1:PageClosePopup ID=”PageClosePopup1″ runat=”server”

PromptText=”Be sure that you have saved your documents.
If you are submitting work, be sure that
it has been added to the drop-box.”
/>

Now, a word of usability and warning…

Do not use this to TORMENT visitors.  I run across FAR too many pages that prompt you everytime you change the page, every time you try to leave… and it’s REALLY annoying.  Use this to add to your user’s experience.  *grin*

kick it on DotNetKicks.com  

  1. September 23, 2007 at 6:09 pm

    Slick! I’ve started dabbling in creating / extending controls. It’s addictive!

  2. September 23, 2007 at 7:02 pm

    Yeah, the more I dink around with it.. the more I go “oh.. cool.. I could just do…” What I hope to do is wrap common functionality for things we keep in our source library at the office into controls–making them both easier to maintain because we use a series of libraries AND a bit easier to use because of the added designer support.

    Oh, and the line breaks and such.. that’s totally your fault, Will–you and the pretty code stuff. *sigh*

  3. September 24, 2007 at 12:04 pm

    Did you see my RequiredTextBox control? That’s my first creation. Now I need to add RegEx support to it as well.

  4. Michael
    September 25, 2007 at 7:20 pm

    Since you’re putting up the dialog because you’re pretty sure they shouldn’t be doing what they chose to do (i.e. leave the page without saving), it makes me wonder whether the default action should be Cancel instead of Okay.

    Sure, it’s counter-intuitive because the person already chose to leave – and the action should default to what they chose to do – but how many times do people get dialogs and just hit the Enter key without really reading what they say.

  5. September 25, 2007 at 7:46 pm

    LOL, you know, I honestly don’t know if you can change the default button. Something to dink with.🙂

  6. January 14, 2008 at 5:39 pm

    David –

    Check out this article for some further inspiration.

    This version only prompts users if some info on the web form has changed.

    – Chris W.

  1. No trackbacks yet.
Comments are closed.
%d bloggers like this: