I am trying to alert users before they go to another page within the app, if there is any unsaved information. I'm following the advice from several stackoverflows to use .beforeunload
but it is only working when I refresh the page, and not if I click on a link to another page on the site. Am I misunderstanding how to use beforeunload or am I needing another event listener?
application.js
//= require forms.js
forms.js
$(window).on('beforeunload', function () {
console.log('unloading')
});
The beforeunload event works like this:
// Fires just before leaving/refreshing the page. Handler will
// be passed the event object and if a returnValue is set on the
// event, the browser will display a confirmation dialog with the
// returnValue message displayed.
window.addEventListener("beforeunload", function (evt) {
evt.returnValue = "Setting this to anything but an empty string, causes this to work!";
}, false);
See this Fiddle for an example.
Related
I am using a button to go back page from where I came from. Now after loading the page i will go through few navigation and there I will meet this back button, for this i am using the following
(window.history.go(-1)
//window.history.back())
in the script. This not work for the very first time only after refresh it will work perfectly. Help please.
I think you also need to do return false; if you added that in HTML onclick. Or in the click handler function add e.preventDefault(). Make sure you specify e (event) as the argument for the click handler function:
function clickhandler(e) {
e.preventDefault();
// ...
};
At work we have a popup dialog system that i would like to use to edit the contents of a widget in CKEditor. Is there any way of going about this?
Does CKEditor have a way of calling outside and get a callback setting values on the Widget?
I have googled it for quite a while now with no success :(
When widget is being edited (on its initialisation, on doubleclick, on enter and when the widget.edit() method was called), then the widget#edit event is fired. The start of the code inside the widget.edit method looks like this:
edit: function() {
var evtData = { dialog: this.dialog };
// Edit event was blocked or there's no dialog to be automatically opened.
if ( this.fire( 'edit', evtData ) === false || !evtData.dialog )
return false;
...
}
This means that if the event was cancelled or there's no dialog name set in the widget.definition (your case, I guess), then after the event was fired nothing will happen.
So, to start, listen on the widget#edit event and show your dialog. Then, when the user presses "OK" button use widget.setData(). You also need to fire the editor#saveSnapshot event before and after doing any changes.
Also, read the documentation of the widget.repository#finalizeCreation method which will let you handle widget creation.
I am working on a simple chat script using Ajax and want to indicate when a user leaves the page. Have read several docs and found this works:
window.onbeforeunload = leaveChat;
function leaveChat(){
... my code
return 'Dont go...';
}
Unfortunately (and logically), if they cancel the exit, my code is still executed and they are flagged as leaving even though they are still on the page? It should only execute if the confirm leaving the page. Any suggestions?
I would use onunload, but it doesn't seem to work in any of my browsers (Chrome, IE).
First, you should add the event handler using:
window.addEventListener('beforeunload', function() {
// Confirmation code here
});
window.addEventListener('unload', function() {
// fire pixel tag to exit chat on server here
// UI interactions are not possible in this event
});
For further research:
unload event reference
beforeunload event reference
Window.onunload reference
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