Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Alert Before navigating to another page

Posted on 2007-03-26
17
Medium Priority
?
623 Views
Last Modified: 2008-02-01
hi,
Can any one tell me how do i alert a user before he moves away from a current page.Actually my asp.net page has a editable infragistic  datagird...now the problem im facing is users are editing the values and forgetting to press the save button and navigating to other pages....i would like to show a javascript pop up window if the user edit grid and tries to navigate to another page...is there any event on asp.net page which is called before going to another page?Can anyone help me on this.
Also,this question was posted previously but was not able to get any satisfactroy replies....there were suggestions saying that i call the alert on onUnloadEvent ...but what if user has to remaing on same page....
and once Unload is called,the page has to be unloaded and there's no way user can remain on same page.
Thanks
0
Comment
Question by:aspnetdev
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 7
17 Comments
 
LVL 25

Expert Comment

by:dstanley9
ID: 18794472
you can return false from the onUnload event handler to cancel the navigation:

<body onUnload="return confirm("Are you sure you want to navigate away from this page?");">
0
 

Author Comment

by:aspnetdev
ID: 18795417
can you tell me how do i make a javascript variable which i set to true to false from code behind....
i have following javascript
var needToConfirm = true;
  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    if (needToConfirm)
      return message to display in dialog box;
  }

on my code behind on click event of a button i have to make this as false...can you tell me how do i do it.
Thanks
0
 
LVL 25

Expert Comment

by:dstanley9
ID: 18795440
add a property to the form class called _NeedToConfirm, then in your javascript add a replacement tag:

var needToConfirm = <%= _NeedToConfirm.ToString() %>;
  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    if (needToConfirm)
      return message to display in dialog box;
  }

Then your code-behind will set the value of _NeedToConfirm, which will be inserted into the page when it is rendered.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:aspnetdev
ID: 18795626
can you be more elaborate because i aaded in my code behind
 bool jsNeedToConfirm = false;
and altered my function as follows

var needToConfirm = true;
var jsNeedToConfirm = <%= jsNeedToConfirm.ToString() %>;
window.onbeforeunload = confirmExit;
function confirmExit()
{
   if (needToConfirm && jsNeedToConfirm == null )
   return "Test";
}
0
 

Author Comment

by:aspnetdev
ID: 18795669
actually i wanted that variable to be True by default except the Button Save is clicked...which is an asp.net button..so on the click event of the page i want to set this variable as false so that i dont get prompt on click save event which will do a post back
0
 
LVL 25

Expert Comment

by:dstanley9
ID: 18795818
To set it to true by default use
 bool jsNeedToConfirm = true;

Then in the click event of your button set it to false.

Yout script will then be:

var jsNeedToConfirm = <%= jsNeedToConfirm.ToString() %>;
window.onbeforeunload = confirmExit;
function confirmExit()
{
   if (jsNeedToConfirm)
     return confirm("Are you sure you want to navigate away from this page?");
   else
     return true; // let the form close
}
0
 

Author Comment

by:aspnetdev
ID: 18795954
actually it should be true by default but on click event it should me set to false...i mean if a user presses save button ihe shud not see the alert.
0
 

Author Comment

by:aspnetdev
ID: 18795959
Also this script is being called on the OnUnloadEvent...so  i need to have a default value of the
var jsNeedToConfirm  in the <script> tagin the html code.
0
 
LVL 25

Expert Comment

by:dstanley9
ID: 18795969
var jsNeedToConfirm = <%= jsNeedToConfirm.ToString() %>;

This will set it to whatever the value of jsNeedToConfirm is in your code behind.  If you initialize it to true and don't change it then the <%= %> tags will insert "true" into your script.
0
 

Author Comment

by:aspnetdev
ID: 18795986
Stanley heres the clear scene of my problem....
actually i have a grid on my page...which is editable...users are actually making chages to the grid and forgettin to press save and navigating away from the page.so i added this script
var needToConfirm = true;
window.onbeforeunload = confirmExit;
function confirmExit()
{
   if (needToConfirm )
  return "Test";
}
now this works good....but again the problem im facing is,when save button is clicked...this prompt is being showed up...so my main concern is,is there anyway where i can make var needToConfirm = false
in the click event of my code....except for this click event it should be true for anything else.
Thanks
0
 
LVL 25

Accepted Solution

by:
dstanley9 earned 1000 total points
ID: 18796017
Yes.  Just like I gave you.

Here's what happens normally:

1) _NeedToConfirm is initialized to true
2) the page is rendered, and <%= _NeedToConfirm.ToString() %> is replaced with "true" (the value of _NeedToConfirm)
3) so yout client script now reads:

var needToConfirm = true;
  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    if (needToConfirm)
      return message to display in dialog box;
  }

Here's what happens when the button is clicked:

1) _NeedToConfirm is initialized to true
2) The button's CLick event is fired, which sets the value of _NeedToConfirm  to false.
2) the page is rendered, and <%= _NeedToConfirm.ToString() %> is replaced with "false" (the value of _NeedToConfirm)
3) so yout client script now reads:

var needToConfirm = false;
  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    if (needToConfirm)
      return message to display in dialog box;
  }

Hope that makes sense.  The solution is mixing client-side JavaScript with server-side processing using <%= %> replacement tags.
0
 

Author Comment

by:aspnetdev
ID: 18796030
Stanley im getting this error if im trying what u asked me to

Compilation Error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS0246: The type or namespace name 'jsNeedToConfirm' could not be found (are you missing a using directive or an assembly reference?)

Source Error:
Line 17:             <script>
Line 18:             var needToConfirm = <%= jsNeedToConfirm.ToString() %>;
Line 19:             
Line 20:             window.onbeforeunload = confirmExit;
 
0
 
LVL 25

Expert Comment

by:dstanley9
ID: 18796046
do you have jsNeedToConfirm defined in your code-behind?

public bool jsNeedToConfirm = true;
0
 

Author Comment

by:aspnetdev
ID: 18796148
Hi Stan,
one more werid error....it says
var needToConfirm = True; is undefined...
why wud it say so...cuz on page_load i made jsNeedToConfirm = true;any comments on this?
Thanks
0
 

Author Comment

by:aspnetdev
ID: 18796151
var needToConfirm = True undefined; im getting this when debugging.
0
 
LVL 25

Expert Comment

by:dstanley9
ID: 18796152
try changing to

var needToConfirm = <%= jsNeedToConfirm.ToString().ToLower() %>;
0
 

Author Comment

by:aspnetdev
ID: 18796265
Stan,
your solution was excellent...but one more problem...if i click the save button even before the event is triggred the alert window pops up...if i press ok then its going to the event handler of the button....so its like even if i set the variable to false....the alert window pops up then click event is being called....any idea or suggestions how to over come this.
Thanks,
0

Featured Post

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question