Solved

Alert Before navigating to another page

Posted on 2007-03-26
17
611 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
  • 10
  • 7
17 Comments
 
LVL 25

Expert Comment

by:dstanley9
Comment Utility
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
Comment Utility
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
Comment Utility
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
 

Author Comment

by:aspnetdev
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 25

Expert Comment

by:dstanley9
Comment Utility
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
Comment Utility
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 250 total points
Comment Utility
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
Comment Utility
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
Comment Utility
do you have jsNeedToConfirm defined in your code-behind?

public bool jsNeedToConfirm = true;
0
 

Author Comment

by:aspnetdev
Comment Utility
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
Comment Utility
var needToConfirm = True undefined; im getting this when debugging.
0
 
LVL 25

Expert Comment

by:dstanley9
Comment Utility
try changing to

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

Author Comment

by:aspnetdev
Comment Utility
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

772 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now