Before Page Unload show Custom dialog - javascript

When a Page unload, i want a confirm box and it is possible with following code
$(window).on('beforeunload', function (event) {
return "Chandan From Mandya";
});
But instead of confirmation box i want to show customized dialog box.
I have read so many blogs, all are saying that we can't override.
But in facebook they are doing it. When in fb status we write something, and without posting, if we try to leave the page. they are show customized dialog box.
How that is possible ???

In jQuery, this is done with unload event.
The unload event is sent to the window element when the user navigates away from the page. This could mean one of many things. The user could have clicked on a link to leave the page, or typed in a new URL in the address bar. The forward and back buttons will trigger the event. Closing the browser window will cause the event to be triggered. Even a page reload will first create an unload event.
You can use it like this:
$( window ).unload(function() {
//Handling the event
});
The link to jQuery page is: http://api.jquery.com/unload/
As for the custom dialog box, try some of these:
http://bootboxjs.com/
http://www.queness.com/post/1696/create-a-beautiful-looking-custom-dialog-box-with-jquery-and-css3
There are a lot of custom dialogbox solutions out there, just google it.

Related

I want to create a function like onbeforeunload for the submit of my page

In my site I have many href and button that relocate the page you are in. I thought that, since you can't modify the body of the alert created with onbeforeunload, I can make my own type but my questions are:
Can I intercept when the page is relocated inside my site without onBeforeUnload or onUnload?
Can I make a function wait until a button i pressed?
Is it possible to intercept some other changes of the browser page like if the user try to close it?
Is it possible to disable the entire page and leave only a toast be available?

How to stop page propagation and show a custom pop up in page unload event

When I have unsaved changes in a page, and user tries to navigate away from the page I want to show a custom pop up to the user instead of IE's default confirmation pop up in "unload" method of the page. But I am not able to stop the propagation of the page in the unload event.I have tried preventdefault() and stoppropagation(), cancelbubble() also, but nothing helped me.
$(window).bind('unload',function () {
//how to stop the page from unloading and show the custom pop up
}
Please suggest.Thank You.

jQuery .unload() function issue, activating only when a specific link is clicked

I'm building a site using bootstrap and have created a navbar with some links. The index page consists of the navbar and a body with a single div that pulls in content (pages I've created) via jQuery's ajax feature (depending on what link was clicked in the navbar, that page is displayed in the div).
The site is for users who have permission to access pages based on folder settings I've created (if a user has access to a folder, he can view the pages within it). It works fine for the most part, but when a user who does not have access to a page clicks on a link, I assumed that the error page would show up in the div. However, it just bounces the user off the site completely to an error page.
My solution is to use a jQuery unload event.
I placed this in a .js file:
$( window ).unload(function() {
alert( "Bye now!" );
});
But a popup now shows up when I click on any external link, when I close the browser, or when I refresh the page. I only want it to activate when a user clicks on a specific link (one with an id class). I want to let them know that they clicked on a link that they do not have access to, and if they do not stay on the page they will be forwarded to an error page. How would I go about doing this?
--Update--
Here is the JSFiddle Link to JSFiddle
So for example, all users have access to the page "technology", so when they click that link on the navbar it is fetched and displayed in the div id "result". However, only some users have access to the page "inspections"; for those who have access the page is fetched, for those without it redirects them from my page to an external error page. I want a warning to pop up so they know that they don't have access and if they follow the link they opened that they will end up on an error page.
--Update 2--
Using Mr. Genuis' code got it working, but I have one final question. I implemented the code and a pop up appears for users who don't have access to the link (exactly what I wanted to happen), but when they click the OK button or click the x button on the popup, they are still forwarded to the error page.
Is there anyway to disable that? I tried updating the unload function (that Mr. Genuis provided) with this code, and it works (it gives the user an option to stay on current page which prevents the error page from loading), but the pop up function also activates when a user tries to close the browser page. I just want it to trigger when the link is clicked.
Here is the code i used:
$(window).bind('beforeunload', function(){ return '>>>>>Before You Go<<<<<<<< \n Your custom message go here'; })
I am really not sure if your approach is right for the given problem.
About activating the window unload event conditionally,
move that unload event hookup inside the link click event, that way you hookup the window unload event only when needed. Not always!
Update:
Something like below. For illustration purpose only.
Warning: I feel there is a smell in this approach.
$(".link").click(function(){
if(true){//Your condition check goes here.
$( window ).unload(function() {
alert( "Bye now!" );
});
}
else{
window.location.href = "someurl";
}
});

Browser back and close event using jQuery

Trying to invalidate the session once click on the browser back button as well as browser close using jQuery.
How to capture the browser back button event and browser close event? Is there any advantage with respect to javascript?
Any help appreciated.
Hopefully this helps you:
http://api.jquery.com/unload/
The unload event is sent to the window element when the user navigates
away from the page. This could mean one of many things. The user could
have clicked on a link to leave the page, or typed in a new URL in the
address bar. The forward and back buttons will trigger the event.
Closing the browser window will cause the event to be triggered. Even
a page reload will first create an unload event.

Help required on onbeforeunload or click on browser back button

If a user clicks the browser's back button, then I want a prompt to appear and ask for confirmation. If the user clicks 'OK', then it should navigate to xx.html. If the user clicks 'Cancel', then it should prevent the navigation. How can I do this?
Note: Already I tried the onbeforeunload method, but it is working for all the navigation actions. For Example, clicking the link on the page will also fire this event and show the message to the user.
You can't. The best you can do is use onbeforeunload and remove that event when clicking on a normal link:
<script type="text/javascript">
window.onbeforeunload = function() {return "Are you sure?"}
</script>
Leave
There's no way to differentiate between navigational actions in the onbeforeunload event. You could disable it for all links/forms on the page by removing the window.onbeforeunload handler in each link's onclick handler, or onsubmit for forms. However, you will still be unable to tell whether the user clicked back, forward, a bookmark, etc or typed a new address into the address bar.
Firstly, you need to capture the "beforeunload" event (which previous answers here did).
// Display browser warning message when back/forward/reload or hyperlink navigation occurs
$(window).on('beforeunload', function(e) {
console.log('page navigation captured');
return 'By leaving this page you will lose the data you have entered here.';
});
More importantly, you want to allow non-disrupted navigation from certain elements (e.g. links with class "allow-navigation"). The way to achieve is to remove the event-handler when your links of choice are clicked.
// Disable capture for certain elements
$('.allow-navigation').on('click', function(e) {
$(window).off('beforeunload');
console.log('page navigation allowed');
});
Will work for your links of the type:
Click me
This way you can control the page navigation. Browser back/forward/etc still open the confirmation box. But the links you choose will work without any disruption.
Hope this helps.
you can do this
$(window).bind("beforeunload", function() {
return "Are you Sure you want to leave this page?"; // Return whatever message you want
});​
also if xx.html is the page in their history than you dont need to add
anything just return a message it will automatically put buttons for
you
Edit: see fiddle before you assume it does not answer the question
asked http://jsfiddle.net/Lxq93/
Edit: there is no definitive way to display a message only on the back
button in my knowledge i have also looked and have seen the only
methods that pick up on the back button are
$(window).bind("beforeunload",function(){return;}) and
$(window).onbeforeunload = function(){return;} and they both pick up
on when the page is refreshed or any other navigation away from the
current page. This is currently the best answer that can be provided
in the year 2014
Edit:
above is for all unload events
http://jsfiddle.net/Lhw2x/85/
been messing with that through all its lower objects it cant be done through javascript till someone decides to make all major browsers use a specific name for each unload event instead of it just being an unload event
so the answer is no you cannot force a navigation to a specific page when they click okay on the confirmation when they try to go to a different page
and back button does not have a specific event name it shares its event with several different events all in the unload event so you cannot make a back button specific function through javascript

Categories

Resources