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.
Related
Some of the queries we have can take tens of seconds to complete.
I would like to be able to cancel the page-load as if the "Stop" button from browser was pressed.
But binding it to key shortcuts using javascript.
From extensive testing it seems that window.stop() works only when the document is not ready or still loading. I would like to stop the page from loading after a link was clicked.
The goal of doing it using javascript is that I would like to perform other operations too.
Tested in Chrome, FF dev and IE...
Anyone encountered a similar behavior and have suggestions on how to proceed ?
1- user clicks a link/a/href
2- realizes its the wrong link
3- presses ctrl-c to stop the loading and stay on this page
the function checks for certain conditions before proceeding to not prevent default behavior...
TLDR: when calling window.close() after click a link/a it wont stop the page from loading, is there any other way to stop a page from loading after a href click event
It turns out that you cannot use this method the way I needed too.
The stop() method is exactly equivalent to clicking the stop button in
the browser. Because of the order in which scripts are loaded, the
stop() method cannot stop the document in which it is contained from
loading, but it will stop the loading of large images, new windows,
and other objects whose loading is deferred.
source / developer.mozilla.org
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
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.
I need to show a confirm dialog box when the user clicks the back button in mobile Safari. I have a long application, and I want to alert users that their application has not been filled out/completed before they leave the page. I have everything set up for when the user clicks a link and tries to leave the page, but I can not for the life of me figure out how to attach an event to the browser's back button. onbeforeunload does not work in iOS. Any tips would be much appreciated.
NOTE: I realize alert boxes are the spawn of satan, but that's what I was told to do.
You can check the persisted property of the onpageshow event. It is set to false on initial page load. When page is loaded from bfcache (user navigates back with back button) it is set to true.
window.onpageshow = function(event) {
if (event.persisted) {
alert("From back / forward cache.");
}
};
For some reason jQuery does not have this property in the event. You can find it from original event though.
$(window).bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
alert("From back / forward cache.");
}
};
In desktop browsers like Chrome you can intercept the leaving of a page and show a message.
And you can't do anything, except for showing the message. The browser is doing the rest, for obvious reasons.
Dunno if this also works on iOS.
window.onbeforeunload = function () {
return 'do you really wanna do that?'
}
http://jsfiddle.net/JAAZ5/
Control over the back button has never been allowed in any browser. I suspect mobile Safari is no different.
So I'm creating some HTML using javascript based on where the user clicks on the page. On page load the script replaces an empty div with a ul and some data. The user clicks on that data to receive more and so on. Now when the user navigates off the page and then hits the back button to go back to the page, IE displays a blank page with the replaced divs, in all other browsers, FF, Opera, Safari, the page either reloads to the initial ul or goes back to the last state with the dynamic data in it.
Anyone have an idea as to what might be happening here? Any help is appreciated.
It sounds like you need to manage the history and state of your page. Check our Brad Neuberg's Really Simple History.
The behaviour of onload events when navigating backwards and forwards is not standard cross browser. As a general rule, I have found that when you click back, onload events tend not to work as the browser is loading it from cache rather than re-requesting the page. What you can try is using the dom ready event rather than window load.
Trull's answer is along the right lines. Opera and later Firefox(>1.5) do not consider loading a page from the cache as requiring to trigger an onload event as the complete DOM state is also cached.
This is trivial to standardise across browsers, as Opera and Firefox do not exhibit this behaviour if you define a window.onunload event. See http://developer.mozilla.org/en/Using_Firefox_1.5_caching