I've a timer set which will click a submit button automatically.
User can also press it.
Can both be triggered at the same time?
I can disable the button after click but if user clicks it and I disable it, it seems calling $("#btn").click() will still work.
I've googled this but could not find question like this.
Context: To prevent session expire, I want to submit a form programmatically after 5 minutes of a booking site which is heavily loaded. When I do could the user too by chance press the submit button?
Code
setTimeout(function (){ $("#btn").click()}, 5*60000); //click after 5 minutes
//this will cause page to reload
Can both be triggered at the same time?
Yes, disabling and triggering are two different things.
When you disable a button, that will only prevent the user from triggering a click by pressing the button. However, programmatic click triggers will still execute all related events.
To prevent subsequent click handler executions, the easiest path would be to use one() like
$(document).one('click', '#btn', function(){...});
This will undbind the click event after it has been executed at most once.
Related
There is a number of threads here on StackOverflow concerning how to catch the back/forward button, but that's not what I want to do. I want to fire a method each time a page is loaded by pressing the back/forward button. So not on the page, where the user clicked back/forward, but on the page that the user got to after clicking back/forward.
I also tried looking at events using Chrome and I haven't found any event that is firing when coming back or going forward to a page.
You can use https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event
The popstate event will be triggered by doing a browser action such as a click on the back or forward button (or calling history.back() or history.forward() in JavaScript).
First you can save the info that user has navigated to localStorage or cookie, and then you can check if that localStorage entry or cookie exists on the next page load event.
If it exists, user has navigated to that page using back/forward buttons, you can do whatever you need to do, and clear the localStorage entry/cookie.
I am trying to display a warning dialogue to the user if the back button is pressed. The following works OK, except I only want this to happen on the back button or reload. not on form submit redirects that occur throughout the application.
window.addEventListener("beforeunload", function (e) {
e.returnValue = 'warning';
}
can anyone help with a solution? preferably javascript only, and not jQuery. thanks
Set a variable when you submit the form. Test for the presence of that variable in the beforeunload handler, and only set the return value if it has been set.
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.
On a certain page in my app, I have a popup guide that walks the user through several steps. When the user clicks the popup next button it advances, sometimes going to a new page (but not always). My problem is that when the user clicks the browser back button, the popup does not close and causes issues if the user tries to advance again. What i'd like to do is just close the popup if the user hits the browser back button. I'd assumed this would be an easy problem, but I can't figure out a solution.
Since this is a SPA, 'onbeforeunload' and 'onunload' don't fire. The way the app is setup, 'onpopstate' also doesn't fire. 'hashchange' fires, but it also fires sometimes when the user clicks the next button on the popup, and I don't see a way to differentiate between that hashchange and hashchange when the user clicks back.
Is there some other event I can check for? I just want to run a function to close my popup (and do cleanup) when the user clicks the back button.
The following assumes you do not use the history API:
Often times I have seen use of # (the anchor tag) in the URL. This will allow for navigation throughout a single page without refreshing the page. As the user progresses in the workflow. For example,
window.location.href = "http://stackoverflow.com/questions/36408418/how-can-i-detect-that-the-browser-back-button-has-been-pressed-in-a-single-page" + "#test"
will not refresh the page. When the back button is pressed, the following statement will evaluate to be true:
(window.location.href == "http://stackoverflow.com/questions/36408418/how-can-i-detect-that-the-browser-back-button-has-been-pressed-in-a-single-page")
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