I'm using the following js to show a popup before the browser/window closes. But it does not seem to be working.
$(window).bind('beforeunload', function(e) {
$('#beforeclose').click();
});
The popup i'm trying to show is prettyPopin . And the #beforeclose is the id of the anchor with which i'm trying to bind the click event before the window unloads. I have noticed that native js popups work but the jQuery popup does not work.
Is there a way to achieve what i want to? Please do explain to me or refer me to the respective link because i'm not an expert at js.
Thanks in advance.
You cannot safely do that.
onbeforeunload is designed in a way to avoid completely preventing the user from leaving your page. The only thing you should do is return a string with a message why the user might not want to leave the page. This message is displayed to the user unless he's using firefox.
Try this:
<script type="text/javascript">
$(function() {
function confirmmsg() {
return "Mail Not sent";
}
window.onbeforeunload = confirmmsg;
});
</script>
Try changing it to
$(window).bind('beforeunload', function(e) {
$('#beforeclose').click();
e.preventDefault();
return false; // just in case..
});
from jQuery documentation:
event.preventDefault()
Description: If this method is called, the default action of the event
will not be triggered.
Basically, you are binding the function that shows the popup on the beforeunload event, but that does not block the browser like an alert window or something like that. Using event.preventDefault() you will stop the execution of event flow.
Related
A bit of a weird situation here. I know this is far from the ideal setup, but this is what I am stuck working with, without much leniency to approach it a different way.
Basically, I have a modal window, which has an email signup form embedded via iframe.
I have a script inside of the iframe that sets a class to the main modal when the submit button is pressed. To set the class on the modal, I am using the following:
$(document).on("click", "#submit-btn", function(e) {
window.parent.$("#modal-popup").addClass("submitted");
}
I have verified that this code works fine. In inspector, whenever I press the submit button, I see the "submitted" class gets added to the modal.
However... outside of the iframe, I have another script running, that checks when the users presses the close button on the modal.
I want it so that if the modal has the class of "submitted", it does one thing - but if it doesn't have that class, it does something else.
So I have the following:
$(".close-exit-modal").on("click", function(e) {
if ($("#modal-popup").hasClass("submitted")) {
//do something
} else {
//do something else
}
});
Unfortunately, every single time I try the script, the "do something else" runs. The modal clearly shows that it has the proper class - and for the life of me, I can't figure out why this script wont recognize it.
Any ideas what's going on here?
Since you appear to have the ability to change the parent, that to me signifies that you are on the same domain. So potentially you could do some different things.
$(document).on("click", "#submit-btn", function(e) {
window.parent.$("#modal-popup").addClass("submitted");
//directly call a method in the parent to let it know the class changed
window.parent.modalPopupWasSubmitted();
});
$(document).on("click", "#submit-btn", function(e) {
window.parent.$("#modal-popup").addClass("submitted");
//trigger a custom event that your parent page can have an event listener for
$(window.parent).trigger('modalWasSubmitted');
});
Optionally, depending on the browser support you need, you could also potentially use a postMessage to let the parent know that something happened. Ref. https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Here I have an anchor tag in my html page which will go to Google when I click. I have a jQuery function which needs to be fired when the page leaves.
$(window).unload(function(){
alert('fffffffff');
});
I found this works fine in a video tutorial. But it's not working for me. Using firefox. help
Its working fine, you just need to remove the alert, as some browsers don't allow alert on unload event.
$(window).unload(function(){
console.log("hello");
});
try this http://jsfiddle.net/vyMdF/
Just run it again and you can check the console.
You can refer over here $(window).unload is not firing
window.onbeforeunload = function() {
return "Are you sure you wish to leave the page?";
}
I´m trying for a while execute a JavaScript function when a user leaves web site by typing a address in the browser and hits return or the user closes the browser clicking in the x button.
I tried the unload event but I cannot get the alert.
This is what I am doing:
$(window).unload(function () {
alert("Are you sure?");
});
also
$(body).unload(function () {
alert("Are you sure?");
});
I am running out of ideas!
You can listen to beforeunload event that fires before the unload event, when the page is unloaded.
$(window).on('beforeunload', function(){
// ...
})
Some browsers (like Chrome) block alerts in unload event handlers, to prevent exactly these kind of annoying messages. Try a console.log or put a breakpoint in to find out if the handler is triggered when you don't have an alert there.
SO question on a similar line:
window.onunload is not working properly in Chrome browser. Can any one help me?
You can only pass the alert by returning a string in a beforeunload handler (HT #undefined), but I would avoid even that, because popups are generally bad, and most people will do minimum processing to work out the make-this-thing-go-away option before they actually think about the contents of the box.
The function you defined in window.onbeforeunload if it returns a string it will pop up a confirm navigation prompt with that message.
Alerts may be ignored!
window.onbeforeunload = function() {
return "All unsaved data will be lost. Are you sure?";
};
Some browsers handle the onbeforeunload differently. Recent Firefox for example will ignore your return string and just display a standard message.
$(window).bind('beforeunload', function(){
alert("Are your sure?")
});
I have an onbeforeunload event :
$().ready(function() {
window.onbeforeunload=function() { return "haha" };
});
And my links are like this (ajax web site) :
<a href="#pageX" />
But the onbeforeunload is never called. What can i do ?
Thanks
I'm guessing since you're trying to bind to the onbeforeunload and return a string, that you're looking to provide the user with an "Are you sure you want to leave this page" dialog on an AJAX site.
In which case you probably need to go about this a little differently by binding a click handler onto the links. So you can prevent the hash change until the confirmation is made.
Something like:
$('a[href^="#"]').live('click',function(e){
if( //should we be confirming first? ) {
//put your confirmation code here either using default JS windows or your own CSS/jQueryUI dialog boxes
// this code should either cache the url of the link that was clicked and manually update the location with it when the user confirms the dialog box (if you're using JQUI windows) or simply use JS confirmation boxes and based on the response, all you need to do is return; and the link click will handle normally
e.preventDefault(); //prevent the link from changing the hash tag just yet
e.stopImmediatePropagation(); //prevent any parent elements from firing any events for this click
}
} );
Don't get me wrong, but are you serious ?
That link just refers a hash-tag, hence, it will not leave the current site and there will be no call to onbeforeunload nor unload.
If there is any *click event handlerbound to that anchor aswell, there must be something in the event handler code which really forces the current site to get unloaded (location.href` for instance).
If you just switch HTML via Ajax, there is no onbeforeunload aswell.
You could bind a handler to the onhashchange event (check browser compatibilty) but that would fire for any change that happens in your url/hash.
You're probably looking for the onhashchange event:
https://developer.mozilla.org/en/DOM/window.onhashchange
I'd like to modify the default behavior of my browser when drag&drop-ing a file in my webapp (html5).
By default, if you drop a file outside a dropable box the browser tries to open it and quit the current page.
On gmail, this is desactivated!
Have you got an idea how this is done ?
I was thinking about the onbeforeunload event but it creates an alert so it's not the solution.
(I'm using plupload)
You should try this:
$(window).bind('drop', function(event) {
event.preventDefault();
event.stopPropagation();
});
$(window).bind('dragover', function(event) {// the ondragover event needs to be canceled in Google Chrome and Safari to allow firing the ondrop event:
event.preventDefault();
event.stopPropagation();
});
I think you're on the right track with onbeforeunload, however you might want to disable the alert with a preventdefaultbehavior. Let me know how that works...
You should make the whole page expect a file drop and not accept it.