prevent Page refresh after pop-up - javascript

How can i prevent page refresh when the user clicks on the OK button of the javascript alert window.
<asp:Button ID="btnComplete" runat="server" Text="Complete" OnClientClick ="verify_complete()" />
function verify_complete() {
if (!chkCmnts()) {
alert("Categories/comments are required. ");
return false;
}
}
Thanks
BB

You are already returning false from the JS so you need to change your markup to:
<asp:Button ID="btnComplete" runat="server" Text="Complete" OnClientClick ="return verify_complete()" />
If the verify_complete() function returns true it will post back, if it doesn't, it won't.

You can not prevent this, but you can notify the user via a popup that he should not reload. This is done with the onbeforeunload window event, best documented at MDN.
add this to your popup window in a Script-Tag
var controllVar = 1;
add this to your parent window. (popup is the return of window.open(...)). Here is actually some intensive error testing, because IE in it's various flavours shows more than one Bug.
window.onbeforeunload = function (e) {
//here we try accessing the popup
try {
if(!popup && popup.controllVar != 1) {
return;
}
} catch(e) {
return;
}
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'YOUR ERROR MESSAGE';
}
// For Safari
return 'YOUR ERROR MESSAGE';
};
This will behave exactly like here on Stackoverflow, if you add some text to the answer textarea and than try to leave the page.

Related

java script code for preventing user from closing browser without alert messege in chrome

This code is giving alert message but I want to prevent user from closing browser. If I comment this line and place alert code before below given code it works, but I want not to show any dialog box.
set Interval(function () {alert("**Hello")}, 10);
I tried above code but I close browser from current tab also:
{
window.onbeforeunload = confirmExit;
function confirmExit() {
return "You have attempted to leave this page. Are you sure?";
}
confirmExit();
}
Try this Code..
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Any string';
}
// For Safari
return 'Any string';
};
Here is the Fiddle try this also.....

Conditional onbeforeunload event in a page

window.onbeforeunload = function(evt) {
var message = 'Are you sure you want to leave the page. All data will be lost!';
if (typeof evt === 'undefined') {
evt = window.event;
}
if (evt && !($("#a_exit").click)) {
evt.returnValue = message;
}
return message;
};
I want user to leave the page clicking to the link (has id ="a_exit") only. In other circumstances such as refreshing the page, clicking another link, user will be prompted that if he/she wants to leave the page. I have tried to use the code above. It still asks me if I want to go away when I click the exit link.
$(window).bind('beforeunload',function() {
return "'Are you sure you want to leave the page. All data will be lost!";
});
$('#a_exit').live('click',function() {
$(window).unbind('beforeunload');
});
Above works for me
My quick example of the conditional prompt before leaving page:
window.onbeforeunload = confirmExit;
function confirmExit(event) {
var messageText = tinymce.get('mMessageBody').getContent();
messageText = messageText.trim();
// ... whatever you want
if (messageText != "")
return true;
else
return void (0);
};
It works under Chrome, FF.
You can return null when you do not want the prompt to show. Tested on Chrome 79.
window.onbeforeunload = () => {
if(shouldPrompt){
return true
}else{
return null
}
}
BTW modern browser no longer support custom onBeforeUnload promp text.
It will always prompt you if you want to leave the page. It's a security issue and cannot be worked-around.
Moreover, anything you return in the onbeforeunload event handler that is not void will be treated as the message for the prompt. Refer to this article: https://developer.mozilla.org/en-US/docs/Web/API/Window.onbeforeunload
This worked for me.
window.onbeforeunload = function(){
if(someBoolean) {
return 'message'
}else{
window.onbeforeunload = null;
}
}
You could just remove window.onbeforeunload in the click handler.
How about a variable to decide, if the link was clicked?
var exitClicked = false;
$("#a_exit").click(function() {
exitClicked = true;
});
window.onbeforeunload = function(evt) {
//...
if(evt && !exitClicked) {
evt.returnValue = message;
}
//...
};
You only set exitClicked = true when the link was really clicked and afterwards, before unloading you can simply check this variable.
This is quite old but I wanted just to change the code given that .live is no longer working in Jquery. So, the updated version would be:
$(window).bind('beforeunload',function() {
return "'Are you sure you want to leave the page. All data will be lost!";
});
$('#a_exit').on("click", function(){
$(window).unbind('beforeunload');
});

'Unspecified error' on preventing page postback

I have a RadTextBox on a page within a RadPageView, defined as:
<telerik:RadTextBox ID="txtReport" TextMode="MultiLine" Height="500"
ClientEvents-OnKeyPress="Report_KeyPress">
</telerik:RadTextBox>
On key press, it tracks that it changed in JavaScript like:
function Report_KeyPress(sender, e) {
if (_changed == false) {
_changed = true;
}
}
On before unload, I tried to return the message as:
window.onbeforeunload = function (e) {
if (!!_changed == true) {
var e = e || window.event;
var msg = 'Changes have been made. Are you sure you want to discard these changes?';
if (e) {
e.returnValue = msg;
}
else {
return msg;
}
}
}
Which in IE 9 on Windows 7 shows the confirm prompt with the message, and buttons to leave the page or stay on the page. When I click leave page, it works great; when I click stay on page, it blows up on the following line:
function __doPostBack(eventTarget, eventArgument) {
theForm.submit(); //Error line
}
With the error:
Unhandled exception at line 33, column 9 in page.aspx
0x80004005 - Microsoft JScript runtime error: Unspecified error.
Any idea why this is happening?
Although it's an old link, this helped me:
http://tinisles.blogspot.ro/2005/10/onbeforeunload-throwing-errors-in-ie.html
The issue is not explained though, it seems it is a known IE issue.

How to determine which control in window.onbeforeunload in javascript caused the event

I have set up in javascript:
var onBeforeUnloadFired = false;
window.onbeforeunload = function (sender, args)
{
if(window.event){
if(!onBeforeUnloadFired) {
onBeforeUnloadFired = true;
window.event.returnValue = 'You will lose any unsaved changes!'; //IE
}
}
else {
return 'You will lose any unsaved changes!'; //FX
}
windows.setTimeout("ResetOnBeforeUnloadFired()", 1000);
}
function ResetOnBeforeUnloadFired() {
//Need this variable to prevent IE firing twice.
onBeforeUnloadFired = false;
}
I'm trying to achieve an edit screen where the user is warned before navigating away. It works fine except I get the pop up for normal post backs of button clicks. I'm hoping to avoid this so I'm figuring if I could determine which button was pressed it would work.
Does anybody know how to determine which button was pressed in the windows.onbeforeunload?
Alternatively anyone know a better approach to what I'm trying to achieve?
Solved this by putting into an update panel all edit items TextBoxes etc.
Now the windows.onbeforeunload only fires for components external to this.
Another method, if you can't "control" that deep you controls, is to mark somewhat the "good controls", that is the ones which should not trigger the away-navigation logic.
That is easily achievable setting a global javascript variable such as
var isGoodLink=false;
window.onbeforeunload = function (e) {
var message = "Whatever";
e = e || window.event;
if (!isGoodLink) {
// For IE and Firefox
if (e) {
e.returnValue = message;
}
// For Safari
return message;
}
};
function setGoodLink() {
isGoodLink=true;
}
And add the setGoodLink function on the events you want to keep safe:
<button type="button" onclick="javascript:setGoodLink() ">I am a good button!</button>

onbeforeunload confirmation screen customization

Is it possible to create a custom confirmation box for the onbeforeunload event in a browser? I tried but then I get 2 confirmation boxes (one from me which is nothing more than return confirm... and then the standard one from the browser).
At the moment my code looks like:
var inputChanged = false;
$(window).load(function() {
window.onbeforeunload = navigateAway;
$(':input').bind('change', function() { inputChanged = true; });
});
function navigateAway(){
if(inputChanged){
return 'Are you sure you want to navigate away?';
}
}
I'm using jQuery for this.
window.onbeforeunload = function (e) {
var message = "Your confirmation message goes here.",
e = e || window.event;
// For IE and Firefox
if (e) {
e.returnValue = message;
}
// For Safari
return message;
};
Please note: Most browsers put this message after some other text. You do not have complete control of the content of the confirmation dialog.
No, you can't avoid the standard one from the browser. All you can do is inject some custom text into it; if you use the following event handler (registered the prototype lib way):
Event.observe(window, "beforeunload", function(event) {
if (showMyBeforeUnloadConfirmation)
event.returnValue = "foo bar baz";
});
(and showMyBeforeUnloadConfirmation is true) you'll get the browser's standard confirmation with the following text:
Are you sure you want to navigate away from this page?
foo bar baz
Press OK to continue, or Cancel to stay on the current page.
[ OK ] [ Cancel ]
I faced the same problem, I was able to get its own dialog box with my message, but the problems I faced were:
It was giving message on all navigations and I wanted it only for close click.
With my own confirmation message if user selects "Cancel", it still shows the browser's default dialog box.
Following is the solutions code I found, which I wrote on my Master page.
function closeMe(evt) {
if (typeof evt == 'undefined') {
evt = window.event;
}
if (evt && evt.clientX >= (window.event.screenX - 150) && evt.clientY >= -150 && evt.clientY <= 0) {
return "Do you want to log out of your current session?";
}
}
window.onbeforeunload = closeMe;

Categories

Resources