Refresh page but not scroll up in IE
Hi I have a large table of items to administer. When I press buttons I use
$.post("update_the_database.php", { mode: 'themode', username: username },
function(result){
window.location.href = window.location.href;
});
Runs "update_the_database.php"
in the background and then reloads the page when finished. It goes back to the top of the page though ...
I tried:
window.location.href = window.location.href + '#the_id';
but in all browsers (IE, Firefox, Chrome, Safari), it changes the url in the address bar, but doesn't reload the page.
Hence:
Difference between window.location.href = window.location.href and window.location.reload ()
"window.location.href = window.location.href will not reload the page if there is an anchor (#) in the url. In this case, you should use window.location.reload ()."
So, I tried:
window.location.reload(true);
and it reloads the page and scrolls to the previous location in Chrome and Safari but not IE and Firefox ...
How do I force the page to reload if everything changed in the url is a hash?
Approach # 2:
window.location.hash = "#" + newhash;
window.location.reload(true);
Now it works in Firefox ...
By the way, if I use window.location.reload (true); in IE it comes with:
Windows Internet Explorer
To display the webpage again, the web browser needs to
resend the information you've previously submitted.
If you were making a purchase, you should click Cancel to
avoid a duplicate transaction. Otherwise, click Retry to display
the webpage again.
Retry Cancel
You need to click Retry, otherwise there will be an error page that says "The web page has expired."
To avoid IE popup I am currently doing:
window.location.hash = "#<?php echo $id;?>";
if (navigator.appName != 'Microsoft Internet Explorer') {
window.location.reload(true);
}
Although it just puts the hash in the address bar and doesn't refresh the page, even if I go to the address bar and hit enter. I need to remove the hash and press Enter to reload the page ... (then it scrolls to the top)
source to share
Instead of adding "#id" every time with window.location.href, which is causing the problem in your case, since for encoding time window.location.href already contains an id and you add another id to it. Use regex '/^(.*)#/is' on window.location.href to find the actual url before reloading. Now use the logic you wrote ie
$.post("update_the_database.php", { mode: 'themode', username: username },
function(result){
var str = window.location.href;
var patt1 = /^(.*)#/;
window.location.href = patt1.exec(str)[1];
window.location.href = window.location.href + '#the_id'
}
}
source to share
Bah for the regex example .. you know what they say when you fix a regex problem!
if(window.location.hash){
window.location.href = window.location.href.replace(window.location.hash,"#mynewhash");}
window.location.hash will contain
the portion of the URL that follows the # character, including the # character. You can listen to the hashchange event to be notified of hash changes in supporting browsers.
see mozilla docs
source to share
The only hack I can think of is storing the scroll position indicated by the symbol window.scrollY
and passing it on to the next request (eg: using a query string). Then you generate code that checks if this key exists, navigate to that position using window.scrollTo(0, lastPos)
. It is not very much and requires a lot of code (and query string dirties) unless you are using a javascript framework.
If you're doing this to update data periodically, it might be worth redesigning your code to do ajax update instead.
source to share