www.webdeveloper.com
Results 1 to 9 of 9

Thread: onunload event question

  1. #1
    Join Date
    Aug 2005
    Posts
    278

    onunload event question

    I have a function that checks to see if any data was changed on a page, and alerts the user if they are trying to leave the page without saving the data.

    Code:
    function CheckSave()
    {
    	if (document.getElementById("hidDataChanged").value == "Yes")
    	{	
    		var boolLeavePage = confirm("You have unsaved data, are you sure you wish to leave the page?");
    		
    		if (boolLeavePage == false)
    		{
    			return false;
    		}
    	}
    }
    All works great in terms of prompting; but, I don't know what the code should be when they hit cancel. So, if a user edits a piece of text, tries to close the browser, then they get the alert (correct), they hit cancel as they forgot to save, but instead of the page just appearing, the browser still closes. Same thing happens for when they click a link, back, or any event of leaving the page. Hitting cancel needs to stop whatever they are trying to do, but I don't know what to put in the code.

    Can someone help?

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    868
    Currently, you can't stop the onunload event in any browser. It's possible to detect it and even run some code before it's complete but canceling it is not possible.

    The only way to prevent pages from unloading once a user closes the browser (or navigates away) is to use the onbeforeunload event. I should also mention that onbeforeunload does not allow alert(), confirm() or prompt() functions to run (there might be an old version of a browser or two that still allows it but it's not allowed in the w3 spec). Instead, the onbeforeunload is designed with a simple task in mind, allow the user to prevent the browser from leaving a page if and only if they wish so (hence why you can't cancel the onunload event or use those 3 functions).

    You get very limited functionality but you are allowed to 'return' a string, which will then be displayed to the user where they are given the option to stay on the current page or leave. So triggering your CheckSave() function would look something like:
    Code:
    function CheckSave() {
    	if(document.getElementById("hidDataChanged").value == "Yes") return "You have unsaved data, are you sure you wish to leave the page?";
    }
    if(document.addEventListener) {
    window.onbeforeunload = function() {
    	var $a = CheckSave();
    	return $a;		
    }
    [EDIT]
    I also forgot to mention that Firefox currently does not display the returned message. It will still confirm any navigation away from a page but everyone is shown the same generic message via Firefox.
    Last edited by Sup3rkirby; 03-25-2014 at 02:56 PM.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Aug 2005
    Posts
    278
    Quote Originally Posted by Sup3rkirby View Post
    Currently, you can't stop the onunload event in any browser. It's possible to detect it and even run some code before it's complete but canceling it is not possible.

    The only way to prevent pages from unloading once a user closes the browser (or navigates away) is to use the onbeforeunload event. I should also mention that onbeforeunload does not allow alert(), confirm() or prompt() functions to run (there might be an old version of a browser or two that still allows it but it's not allowed in the w3 spec). Instead, the onbeforeunload is designed with a simple task in mind, allow the user to prevent the browser from leaving a page if and only if they wish so (hence why you can't cancel the onunload event or use those 3 functions).

    You get very limited functionality but you are allowed to 'return' a string, which will then be displayed to the user where they are given the option to stay on the current page or leave. So triggering your CheckSave() function would look something like:
    Code:
    function CheckSave() {
    	if(document.getElementById("hidDataChanged").value == "Yes") return "You have unsaved data, are you sure you wish to leave the page?";
    }
    if(document.addEventListener) {
    window.onbeforeunload = function() {
    	var $a = CheckSave();
    	return $a;		
    }
    [EDIT]
    I also forgot to mention that Firefox currently does not display the returned message. It will still confirm any navigation away from a page but everyone is shown the same generic message via Firefox.
    I am following what you are saying, but am struggling with the syntax, all of this type of event is new to me. Here is what I have:

    Code:
    function CheckSave()
    {
    	if (document.getElementById("hidDataChanged").value == "Yes")
    	{
    		return "You have unsaved data, are you sure you wish to leave the page?";
    	}
    
    	if (document.addEventListener)
    	{
    		window.onbeforeunload = function()
    		{
    			var $a = CheckSave();
    			return $a;
    		}
    	}
    }
    nothing happens, no prompt, and the page allows you to leave with no alert.

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    868
    Sorry, I must be getting old

    I meant to remove part of that script but it seems I left a line in there that shouldn't have been.
    Code:
    function CheckSave() {
    	if(document.getElementById("hidDataChanged").value == "Yes") return "You have unsaved data, are you sure you wish to leave the page?";
    }
    window.onbeforeunload = function() {
    	var $a = CheckSave();
    	return $a;		
    }
    That should be correct. I was going to use addEventListener, which requires a check since it won't work in IE8 and lower, but then I decided to set the onbeforeunload event a different way.

    I used to be very strict about my brackets with all functions and statements but it is acceptable to omit the opening and closing brackets on an if statement when there is only one action to execute. So in this case if your 'hidDataChanged' value has been set to yes it is okay to simply omit the opening and closing brackets, which saves space and can make the code a bit more 'tidy'.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  5. #5
    Join Date
    Aug 2005
    Posts
    278
    Quote Originally Posted by Sup3rkirby View Post
    Sorry, I must be getting old

    I meant to remove part of that script but it seems I left a line in there that shouldn't have been.
    Code:
    function CheckSave() {
    	if(document.getElementById("hidDataChanged").value == "Yes") return "You have unsaved data, are you sure you wish to leave the page?";
    }
    window.onbeforeunload = function() {
    	var $a = CheckSave();
    	return $a;		
    }
    That should be correct. I was going to use addEventListener, which requires a check since it won't work in IE8 and lower, but then I decided to set the onbeforeunload event a different way.

    I used to be very strict about my brackets with all functions and statements but it is acceptable to omit the opening and closing brackets on an if statement when there is only one action to execute. So in this case if your 'hidDataChanged' value has been set to yes it is okay to simply omit the opening and closing brackets, which saves space and can make the code a bit more 'tidy'.
    This code:

    Code:
    function CheckSave() {
    	alert("test");
    	if(document.getElementById("hidDataChanged").value == "Yes") return "You have unsaved data, are you sure you wish to leave the page?";
    }
    window.onbeforeunload = function() {
    	var $a = CheckSave();
    	return $a;		
    }
    Just alerts "test". (I tried without the test to see if it was firing and it is) when data has been changed, but nothing else.

    It may help that I am on a fixed IE 11 environment, with the site in question in compatibility view

  6. #6
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    868
    My question to you would be, how are you updating the 'hidDataChanged' input field?

    My code is not setting that field for you, but as long as there is an input field with the value 'Yes' then that code works as intended (the version I posted). The alert() you added is ignored in all modern browsers when fired on the onbeforeunload event.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  7. #7
    Join Date
    Aug 2005
    Posts
    278
    Quote Originally Posted by Sup3rkirby View Post
    My question to you would be, how are you updating the 'hidDataChanged' input field?

    My code is not setting that field for you, but as long as there is an input field with the value 'Yes' then that code works as intended (the version I posted). The alert() you added is ignored in all modern browsers when fired on the onbeforeunload event.
    I placed the alert in just to see if the checksave function was firing. Remember, I'm in a fixed IE11 compatibility mode environment, aka, IE 7.0. The alert pops up, so I know the CheckSave function is in fact being called.

    When I change the alert to be alert(document.getElementById("hidDataChanged").value);

    it alerts Yes

    I have a function that changes the data to Yes onchange. However, I've tested with hard coding the value to Yes.

    The return portion is not working, or stopping the code rather. Here is the code and I'll explain what happens:

    Code:
    function CheckSave()
    {
    	if(document.getElementById("hidDataChanged").value == "Yes")
    	{
    		alert("1");
    		return "You have unsaved data, are you sure you wish to leave the page?";
    	}
    
    	alert("2");
    
    	window.onbeforeunload = function()
    	{
    		var $a = CheckSave();
    		return $a;
    	}
    }
    When I simply refresh the page, it alerts 2 as the hidDataChanged does not equal yes yet.
    When I make a change to data, then hit refresh, it alerts 1, then refreshes the page.

    So, it sees the return portion of code, then either stops, or ignores everything else.

  8. #8
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    868
    The code you are using there is not what I gave you. The code in your last post there does not set the onbeforeunload event until after CheckSave() runs at least once. You would have to run CheckSave() once before the window closes then run it again when the window closes to possibly get any result.

    If your hidDataChanged field is being set to "Yes" properly then all you need to do is insert this somewhere on your page:
    Code:
    <script>
    function CheckSave() {
    	if(document.getElementById("hidDataChanged").value == "Yes") return "You have unsaved data, are you sure you wish to leave the page?";
    }
    window.onbeforeunload = function() {
    	var $a = CheckSave();
    	return $a;		
    }
    </script>
    It doesn't need to be modified and will work in IE7-IE11 (as well as Chrome and Firefox). If the value is set, when you close the browser/tab, leave the page or refresh you will be given the message in the return statement (with the exception of Firefox, which does not support the message part, only the confirmation).
    Last edited by Sup3rkirby; 03-26-2014 at 02:49 PM.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  9. #9
    Join Date
    Aug 2005
    Posts
    278
    The issue was I was putting that code into my .js included page, not into the page itself Then, I put on the body of the html the onbeforeunload="CheckSave()". Pasting the code into the page itself did EXACTLY what I was looking for, thank you very much!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles