popstate event does not get fired when clicking on the browser back button this is my code
$(document).ready(function() {
if (window.history && window.history.pushState) {
window.history.pushState('forward', null, './#forward');
$(window).on('popstate', function() {
alert('Back button was pressed.');
});
}
});
When put this code in the console it works but when I put in the file and try to load the page and click on the back button nothing happens. It redirects me to the previous page no alert.
I noticed if do not do anything on the screen then it does not work but if you click on scroll on the screen then the popstate event gets called
Related
below code will trigger a popup with Reload site? or Leave site? message
on page refresh, press back button or on tab close
How to trigger this event only on tab close
window.addEventListener('beforeunload', function (e) {
// Cancel the event
e.preventDefault();
// Chrome requires returnValue to be set
e.returnValue = '';
});
There is no direct way of doing it because javascript doesen't have access to read browser actions. But if you want to do something on the server based on these actions, you may find this helpful.
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.
I have code that is in a content script that is injected by a page mod. This runs on a timer and checks that the 'send' button of a compose window in Gmail is open, and if it is then I want it to add these two properties of mousedown and click.
The end goal is to capture the information in the email to perform tracking operations on it, but for now I just want the print statements to print when the events are triggered.
Sendelem refers to the 'send' button, and as of the current code, neither is activated when the button is clicked or when mousedown is activated.
This is the code that I have for mousedown:
//when the send button is pushed
sendelem.on("mousedown", function() {
var send = $(this).data('sent');
console.log("mouse pressed down");
....
});
And the same for onclick, just replacing "mousedown" with "onclick".
I also tried writing it like this:
//when the send button is pushed
sendelem.mousedown(function() {
var send = $(this).data('sent');
console.log("mouse pressed down");
...
});
and
//when the send button is pushed
$(sendelem).mousedown(function() {
var send = $(this).data('sent');
console.log("mouse pressed down");
...
});
I have wrote the following code to run the onbeforeunload within unload. However, this doesn't seem working. Does anyone know what's wrong about my code and anyway to make it work?
$(window).unload(function () {
if ($('.submitAction').val() == "" && isChange) {
window.onbeforeunload = confirmExit;
}
});
function confirmExit() {
return "If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
The onunload event is the absolute last event that fires when the user navigates away from the page or closes the browser.
Binding to the onbeforeunload event within the onunload event would be pointless, as this event has already occurred (hence the name onbeforeunload). The solution would be to bind to the onbeforeunload event before the event actually happens, such as when the page loads.
Something like this (untested):
$(window).bind('beforeunload', function () {
if ($('.submitAction').val() == "" && isChange) {
return "If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
});
This line returns a string:
return "If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
I think you meant:
return window.confirm("If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?");
I have this inside my $(document).ready function:
$(window).unload(function() {
check_saved();
});
check_saved() just triggers a dialog box that asks the user if they would like to save their form data before leaving the page. The browser displays the dialog box but then navigates away instantly. I want the browser to wait until the users clicks a button, just like it would for a normal alert(). How do I do this? Also, chrome seems to ignore the unload event? Any ideas?
How the user navigate to another page? Let say user is doing it by clicking some link on the page. then you can check in that action instead of page unload.
$('a').click(function(e){
if( check_saved()!=true){
e.preventDefault();
return false;
}
});