window.onbeforeunload javascript function - javascript

I am trying to show div with some contents when user tries to close the window. I have done the following JavaScript code to do so:
function closeWindow(){
if(submitted == false)
{
$("#confirmation").show();
return 0;
}
}
window.onbeforeunload = closeWindow();
Whenever I close window, alert is appearing for confirmation. I don't want to show that confirmation message instead show div with id confirmation.
Is there any way to prevent that confirmation alert ?

Related

Open dialog before user leave page js

window.onbeforeunload = function() {
openDialog(dialogs.whyNot)
}
I want to open some dialog before user leave page , I've found that I can show some message before leaving a page by making it like this :
window.onbeforeunload = function() {
return 'Message'
}
But instead of messages I want to show my own dialog , is it possible to make ?
By my own dialog I mean:
No you cannot show anything like a custom dialog when the page starts unloading. You have to use the standard alert box.
window.onbeforeunload = function() {
window.alert('Message');
}
You could try alert, if all you want is for the user to press OK:
window.onbeforeunload = function() {
window.alert('Message');
}
If you want OK/Cancel buttons, you can use confirm (the window prefix can be dropped). Confirm will return True if the user clicked OK, False if the user clicked Cancel. Here is an example:
window.onbeforeunload = function() {
if(confirm('Message')){
console.log('user clicked ok');
} else {
console.log('user clicked cancel');
}
}
Edit (after question edit):
You will need to do a modal popup with html and css, see here for an example:
https://www.w3schools.com/howto/howto_css_modals.asp
For a jquery example see here:
How to display Custom Dialog box on button click

Show error on pressing back/forward button

I have a login page,when the logged in user presses the back button ,the page should show error rather than showing login page and same should be applied on the forward button.
window.onbeforeunload event will fire when the user leaves the page.
var prevURL = document.referrer;
window.onbeforeunload = function() {
if(prevURL == 'provide your login page URL here') {
return "Error message"; // alert
//or do whatever you want
}
};
Note that this event will fire when the user leaves the page for anyway.

Show progess bar dialog when submit

I'd like to show a popup jquery styled if possible on every postback, for example saying Loading... I don't know how to accomplish that nor which tecnologyes use. I want to put the code on a super class so that I need to code only once. In principle I'd like that when I press the submit button, the page hides itself.
Hope you help me.
Edited:
It should be something like that. I have a page, I open a jquery dialog with an iframe on it and with a submit button. When I submit the form the dialog with the form must hide and a new dialog saying loading... have to appear; when the operations finishes this dialog must hides.
You can do that using the onsubmit trigger on the form of you page as:
<form id="form1" runat="server" onsubmit="return disableForm(this);">
...
</form>
an on javascript what I do is that on the first submit click I let the submit, and close/open the dialogs that I like. If the user clicks two times the submit I show him a message and stop the second submit.
var submitted = false;
function disableForm(theform) {
if (true == submitted) {
alert("form already submitted... please wait...");
return false;
}
else {
// here you close the dialog, open an other
submitted = true;
return true;
}
}
I can not write how to close the dialog that you open since you do not have give any clue/code about it, but I think it will be easy.
Assuming you are using updatepanels. You will need handlers like this one and an image "LoadingImage"
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandle);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandle);
function beginRequestHandle(sender, Args) {
document.getElementById("LoadingImage").style.visibility = "visible";
//Do something when call begins.
}
function endRequestHandle(sender, Args) {
document.getElementById("LoadingImage").style.visibility = "hidden";
}
</script>
What it does is it shows an image when ajax call starts and hide it when it completes. You can use an animated gif for your purpose.

Intercept selection in window.onbeforeunload dialog

in my web application if the user leaves the current page without having saved changes in the form a pop up window is opened to alert him about that.
For the pop up I use some scripts code injected from codebehind (C#):
var Confirm = true;
window.onbeforeunload = confirmClose;
function confirmClose()
{
if (!Confirm) return;
if(/*CHECK CHANGE CONDITION IS TRUE*/)
{ return " + WARN_message + "; }
}
I would need to intercept whether the user click on cancel or ok button.
I tried like:
var button_pressed = window.onbeforeunload = confirmClose;
But it returns always true.
How can get which button was pressed?
Thanks
Not possible. There is no event associated with the buttons.
What you might be able to do was to see if the user came back by setting a value or perhaps a cookie in the page in the onbeforeunload and test if it is there after some time has passed
but see the duplicate Way to know if user clicked Cancel on a Javascript onbeforeunload Dialog?

Detect if javascript dialog button clicked and redirect

Hey guys, I am showing a javascript dialog box to user using window.onbeforeunload to handle if user clicks back button.
My code is working to a point, but I am struggling to redirect the user if they click 'Leave this page' (Message varies in different browsers).
// Set check var false to begin with
// This is set true on submit btns using onclick event
submitFormOkay = false;
// If we are on check-availability page
if( window.location.href.indexOf( 'check-availability' ) != -1 )
{
// If back button is clicked
window.onbeforeunload = function()
{
// Only show dialog if submit btn wasn't clicked
if (!submitFormOkay)
{
// Show dialog
return "Use of the browser back button will lose form data.\nPlease use the 'Previous' button at the bottom of the form.";
// If 'leave' this page was clicked'
// do 'window.location = window.location'
}
}
}
Thanks in advance.
David
If they click "Leave this page" then the browser will complete whatever action the user was trying to perform before the dialog popped up.
But if they do navigate Back, they will still be on your site, right? So you can just do whatever you need to do when that page is re-requested (providing it's not cached).
In other words ... detect on server-side if the user has clicked Back, and then do whatever you would have done if they had clicked Previous.

Categories

Resources