Disable Browser onUnload on certain links? - javascript

I am working on a Web Hosting panel which has a DNS records manager. I have to use a lot of JavaScript to make it perform almost like a desktop application.
I really wanted to show a Custom Dialog window when a a browser runs beforeunload however after some research I have discovered I am stuck using the browsers default Dialog window.
So this JavaScript code below does just that, my problem is I need to make sure it does NOT get fired off on certain link clicks.
I am hoping to be able to maintain an Array of CSS class names, and if the link clicked is in this array then it will NOT show the onunload event.
I'm sure this is easy for a JavaScript developer. Could someone show me how to do this?
//sample Class array
safeLinks = ['test', 'test2', 'test3', 'test4', 'test5'];
// onunload event
$(window).on('beforeunload', function(){
return 'Are you sure you want to leave?';
});

You could remove the event handler when they're clicked:
var safeLinks = ['.test', '.test2', '.test3', '.test4', '.test5'];
function promptBeforeClose() {
return 'Are you sure you want to leave?';
}
$(window).on('beforeunload', promptBeforeClose);
$(document).on('click', safeLinks.join(', '), function(e) {
$(window).off('beforeunload', promptBeforeClose);
});
Also, if these safe links have a common ancestor, use that instead of document as the delegation parent or people will complain. ;)

use a flag variable.When ever click on the onload then make it as true
$(window).on('beforeunload', function(){
if(flag != false)
return 'Are you sure you want to leave?';
});

Related

Detect link click event in chat window

I need to capture the event that occurs when a user clicks a link on my chat application. I am using IE11.
Is there a way to capture the user clicking the link, when such a link could be dynamically added to the chat box (i.e. user sends "www.google.com" message) at any given time?
I have been using onbeforeunload by the way and while this detects the browser close event it will not detect the link click event, I am not sure why, so I was thinking that a jquery solution that checks the links on the page for an onclick could solve my problem...
Thanks,
dearg
Yes, you can use event delegation like:
$("#chatWindow).on('click', 'a', function () {
//do something
});
You could do it with a function like this:
$('a').on('click', function(){
//track clicked link here
return true; //to allow following the link this is the default behavior no need to add
return false; //prevent default behavior
});

Is there a way to overwrite the refresh button action?

I would like to use some kind of preventDefault function to overwrite what hitting the refresh button on the browser does (or also pressing CTRL/CMD+R).
Is there something that allows me to prevent refreshing the page?
I tried this but it doesn't seem to do anything in Firefox.
window.onunload = function(){
alert("unload event detected!");
}
You can use onbeforeunload to prompt whether they'd like to leave:
window.onbeforeunload = function() {
return "Are you really sure?\nI don't know why anyone would want to leave my beautiful website!";
};
However, you can't override it any more than that.

Jquery event doesn't fire in any case

So, here I want just to alert true, when window is closed ( I mean particullary tab in browser).
$(document).ready(function(){
});
$(window).unload(function(){
alert('true'); });
tried $(window) also inside $(document).ready(), nothing.
You're very limited in what you can do in the context of window.unload. The browsers won't let you do anything to force the user to stay on the page, and that includes calling alert.
The best thing you're allowed to do is return a string from an onbeforeunload handler - the browser will display that to the user, along with a question like "Are you sure you want to leave this page?"

jQuery: how does one disable everything inside a div? but still keep everything visible?

The goal is to disable all the links, when one is clicked, and then disable all the links until the server sends an undisable command (using a similar method that would be used to disable).
So, since all the links are in one containing div, I figure I could just temporarily disable that.
How would I go about doing that?
If you just want to disable the default link behaviour, you can use a combination of delegate and event.preventDefault:
$('#container').delegate('a', 'click', function(e) {
if (linksDisabled) {
e.preventDefault();
}
});
You can then set linksDisabled (in a parent scope) to true or false in your other event handlers as appropriate.
If these links are doing Javascripty things, it's a bit trickier. It would probably be easiest to put the if (linksDisabled) check in each event handler.
Try this:
$("#YOUR_DIV a").click(function(){
return false;
})

Best practice for warning the user they will lose data

I have a site which uses a lot of JavaScript (mainly jQuery) and I need a nice global way to let the user know that they will lose unsaved changes when they navigate away from a particular page.
At the moment I have an onchange event placed on the inputs and wrap my main navigation in a function which will display the warning when clicked.
This feels really clunky and doesn't scale well (navigation which is not part of the main navigation needs to be manually wrapped, which is far from ideal)
I have an onchange event on my inputs and set an isDirty variable to true when they change.
Then I use onbeforeunload event to warn the user about unsaved changes:
var isDirty = false;
window.onbeforeunload = function (evt) {
if (isDirty) {
return 'If you continue your changes will not be saved.';
}
}
You are looking for the onbeforeunload event.
like
$(window).bind('beforeunload', function(){
return "Are you really sure?";
});
native:
window.onbeforeunload = function(){
return "Are you really sure?";
});
That of course is just the "preventing method". You still need some logic to know whether or not there were changes on your site. That could easily be done by using a boolean for instance. Furthermore you should make a quick detection like
if('onbeforeunload' in window){}
I think all major browsers support the event nowadays, but there are still browser which don't know that event. So if the above condition fails, you can still fallback gracefully to another way.
Use on the on unload window event to catch when the page is going to change. Then prompt a lightbox alert to warn the user if navigating away any unsaved data will be lost.

Categories