Create a JavaScript function similar to the beforeUnload function that fires when the link is clicked to show a custom confirmation dialog.
In my JavaScript application, I have a typical warning message that is displayed if a user tries to leave the page before saving their data.
This is done using an event beforeunload
. This event allows you to change and customize your own text and nothing else. I read that some browsers don't even allow your own text!
Anyway, in my application I now have an attractive dialog box that I use throughout the application when I need a user to confirm something.
Ideally, I would like my custom dialog to show when the user tries to leave the page with unsaved changes. I even have a Save AJAX button right in the dialog for the user to save!
As we know this is simply not possible, it seems an event is being used beforeunload
.
So, I came up with another plan, instead of just giving it up and saying that it is not possible, like every StackOverflow question and blog post on the subject, and said that I prefer to give it up because I know that It can be done!
I have an idea how to do this, and then after my idea came up, I found a site that actually does it! Facebook
So, in my application, I have a global JavaScript variable. var unsavedChanges = false;
Now, anytime there are changes on the page for form fields and actions, which I call "change", I will then set var unsavedChanges = true;
when this happens on these points.
unsavedChanges
is how I determine whether to show or not show my event alert beforeunload
.
So using this same variable instead of just displaying an event alert beforeunload
, I would also like to use it in another event.
I would like to set an event click
for all my links. So anytime a link is clicked in my application, it checks unsavedChanges
, and if true
, I show my own jQuery dialog box. It will have a "Save" button to save the content and a button to cancel, and one to continue searching for the desired destination. It should also be set unsavedChanges
to false
, which will hopefully prevent the event from firing window.beforeunload
immediately after.
Now I mentioned that Facebook seems to be doing exactly what I just sketched, or at least very similar in the posts page.
Exit link Click
Here is a screenshot of this in action when the LINK button is pressed ....
Exit with link without link
Now when you traverse the Link and try to close the window or enter a new url in the address bar, basically any other kind of page exit that is not a link click, then it falls back to the default browser behavior for the beforeunload
event
So what I described above seems possible, if you look at what Facebook does, it seems that I have outlined this achievable way to do it. Obviously you've lost the custom support for the No Link dialog, but it never existed, so there is no loss and you add support for all link clicks, that's awesome!
Now I have an idea for this, but I don't know exactly how to code it working 100% and I need help.
For example, some problems that I don't know how to deal with ...
- If a link is clicked and already has a click event on that link, how can we use this new click event and also use the existing click event?
- Some links cannot guarantee this behavior. If I have a link that already has a click event and that event does something like removing an element or adding an element to the page, then it doesn't even try to leave the page in the first place, so it shouldn't show the dialog! So there must be some way to set the link to not have this feature. Also, it is possible that it will NOT be installed by default in links that do not have a link.
<a href="">
or<a href="#">
or<a href="#targetName">
they obviously shouldn't have a click event on them!
So this is all an idea at the moment when I see that Facebook is doing something! I would like to hear more ideas, thoughts, everything related to this issue. It would make really good blog posts if a good solution comes out of these questions, as hundreds of people seem to really want this functionality and I know I have it for years.
source to share
So we created in order to get a linkless interception that you need to use onbeforeunload, so I won't even dive into that. For links, you can intercept the click event and then evaluate the location object to see where it will take you. Make decisions based on this. For me, I think the host, path and protocol are the ones to check. You can check them all if you like. If any of them are different, they leave you.
Modify the jQuery selector as you want it to ignore certain links.
// Just going to assume this is true for arguments sake.
var unsavedChanges = true;
$('a').click(function () {
// Properties to compare between link and current location
// https://developer.mozilla.org/en-US/docs/Web/API/Location
var toCheck = ['host', 'pathname', 'protocol'];
var toCheckL = toCheck.length;
return function (e) {
// Skip this if there no changes
if (!unsavedChanges) return true;
// Just to be sure
if (this.constructor !== HTMLAnchorElement) {
return true;
}
// Start off assuming they want to stay
// because we can't stand being left again
var staying = true;
for (var i = 0; i < toCheckL; i++) {
var arg = toCheck[i];
if ( this[arg] !== window.location[arg] ) {
// If anything doesn't match, just move on and let her go
staying = false;
break;
}
}
if ( !staying ) {
// Do whatever you want here
// Return false to stop the link
// Recommend you reference this.href if you
// decide to let them leave after all
alert("Blocked");
return false;
}
alert("Baby come back...");
};
}());
source to share