User clicks and button gets disabled.
User reloads page.
Button is still disabled.
I want it to be enabled.
I have tried anything from onkeypress f5 to onbeforeunload and nothing works.
This is an issue I had the misfortune of encountering before, since most browsers rely more and more on local cache to improve page loading. While in chrome usually another page refresh fix it, Firefox is more stubborn.
I solved it by running a function using body onload event. This function detects those incorrectly disabled elements and re-enables them.
To avoid errors there must be a check to indicate weather this page has the elements to check in the first place.
Related
I'm want to disable the manual refresh but still allow it throw code only.
the page is responsive so the mobile refresh(drag down) is also need to be disabled.
I've tried already to preventDefault with:
window.onbeforeunload
window.onunload
and jquery:
$(window).unload
You cannot disable a refresh - you would enforce the user to stay on your page.
A common way (like jsfiddle and others) that is used when there's unsaved state, is to trigger a popup that asks the user if the page should really be left.
This is useful if some input hasn't been saved - having just some content that is refreshed over time it may be more annoying for the users.
A possible solution is found here
I want to fire the onbeforeunload event only when the tab or browser is closed and not upon refresh, link click and so on. I found a site where that works: https://checkout.deindeal.ch/
Steps to fire the event in Chrome:
Put something into the cart
Click on "Zur Kasse"
Close tab
onbeforeunload Message is shown and a popup opens. onbeforeunload events like refresh will not fire. I debugged their code, but could not find the place where they exclude those events or whatsoever.
Anyone out there who can find the correct place in the code?
Thanks!
For readers that want to use onbeforeunload,
The event onbeforeunload should be used for preventing user's data loss, like filled in forms and other data that are not saved and will be lost upon page refresh.
Using onbeforeunload to prevent a user from leaving your page is annoying and will not stop the user from leaving.
You can not detect a browser tab refresh button press, unless the user use a shortcut that you can detect with key press (like Ctrl+F5).
More info here :
javascript beforeunload detect refresh versus close
Old answer was removed in order not to mislead anyone (it was not working on nowadays browsers).
More stack overflow links related on onbeforeunload use:
How can i get the destination url in javascript onbeforeunload event?
How to prevent calling onbeforeunload when page refresh
Fire onbeforeunload confirm alert for external sites only
When a form is submitted I show a loading animation and disable the button. Unfortunately, when I click the back button, Firefox still shows the loading image and the button is still disabled. This does not happen in Chrome. Any ideas?
$(document).ready(function() {
$('#go').removeAttr('disabled');
$('#loading').replaceWith('<img id="loading" src="/static/images/loading.gif" style="display:none; vertical-align:middle" />');
$('#go').click(function(e) {
e.preventDefault();
$('#go').attr('disabled', 'disabled');
$('#loading').show();
$('#go_form').submit();
});
});
Firefox uses in-memory caching for entire web pages, including their JavaScript state, within a browser session. Going backwards and forwards between visited pages requires no page loading. This feature makes page navigation very fast.
In order to detect this, use the pageshow event. The event will have a property called persisted which will be true if you are navigating through the cache. If you see this state, you can reset the state of your page.
This is probably due to different cache mechanisms in Chrome and Firefox. A simple fix would be to hide the loading image in the onunload event.
I have a form that disables submit button, when it is clicked.
But what if the user clicks browser "Stop" button.
Then he will not be able to resubmit the form.
Is there any way to handle such cases, possibly detecting Stop button press?
What is the reason for disabling the submit button?
You are trying to avoid double-clicks? -> you can disable the submit button for only a brief period of time, re-enabling it again on a timeout.
You are trying to avoid impatient reload-clicking? -> the same, but with a longer inactivity period.
You are trying to stop a form being submitted twice causing duplicate actions to occur? -> you can't fight this just with button disabling, as going back/forward will cause the page to be reloaded, likely keeping old form content but not the disabledness state, unless short-circuited by bfcache. In this case you must create a one-use token or new item ID that cannot be used more than once, and put it in a hidden field in the form. The server can check for it and disallow duplicates.
possibly detecting Stop button press?
Avoid onstop, it's not really reliable. Apart from browser support issues, it can't catch all possible combinations of navigation and stop/reload/etc. You'll never know how far the server script got, whether it performed an action.
Your best bet would be to detect the submit button on the server, so it can only be submitted once. This way, no matter what happens (firebug etc), the form is only submitted once. There is an OnStop() event, but it is IE only, and I would not recommend using it.
document.onstop
You can find documentation for it here:
http://www.codeguru.com/forum/archive/index.php/t-437967.html
https://developer.mozilla.org/en/DOM_Client_Object_Cross-Reference/document
There may be different reasons of page unloading:
1 User closes the current window.
2 User navigates to another location.
3 Clicks the Back, Forward, Refresh, or Home button.
4 User submits a form, and then browser starts to unload current page and load page with results of form submitting. (Assuming that the current window is the form's target).
5 and so on...
Can I somehow know in onunload handler that the reason of unloading is p.4, i.e. moving to page with results of form submitting?
I could define some flag when submiting form, but this does not solve the problem. Because response (on form submit) from web server takes some time, browser doesn't unload the current page immediately and waits response from server. And during this waiting user may close window or navigate anywhere. And I need to know whether was it indeed moving to results page or something else...?
You could hijack some of those events.
For example for links, you could add an event handler on links that saves their href attribute, performs what you require, then sets window.location to the href you had stored in a variable.
The exact reason of page unload cannot be known in the unload handler. OnUnload event is not a standard and was implemented by IE first.
Different browsers might handle it differently and fire the event for different cases.
msdn reference
mozilla reference
So if you are trying to know the reason of unload in the unload handler, I think you might be out of luck. However as Alex pointed out in his answer, you could probably know about user navigating away from your page by clicking some link on your page by making your click handlers for those links more intelligent.
on unload cant handle its looks like but maybe when load you can handle.
as explained
performance.getEntriesByType("navigation")[0].type
You can check this Link
What is the replacement for performance.navigation.type in angular?