Reload page but don't scroll to top in IE

Question

Hi I have a big table of items to administrate. When I click buttons I use

$.post("update_the_database.php", { mode: 'themode', username: username },
            function(result){
                window.location.href = window.location.href;
        });

This runs "update_the_database.php" in the background then when it is finished it reloads the page. It goes back to the top of the page though...

I've 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.

From here:

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's an anchor (#) in the URL - You must use window.location.reload() in this case."

So I tried:

window.location.reload(true);

and it reloads the page and scrolls down to the previous spot in Chrome and Safari but not IE and Firefox...

How to force a page to reload if all what was changed in url is hash?

Approach #2:

window.location.hash = "#" + newhash;
window.location.reload(true);

Now it works in Firefox...

BTW if I use window.location.reload(true); in IE it comes up 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 have to press "Retry" otherwise it has an error page that says "Webpage has expired".

To avoid that IE popup I'm currently doing:

                window.location.hash = "#<?php echo $id;?>";
                if (navigator.appName != 'Microsoft Internet Explorer') {
                    window.location.reload(true);
                }

Though it just puts the hash into the address bar and it doesn't refresh the page even if I go to the address bar and press enter. I have to remove the hash and press enter to reload the page... (then it scrolls to the top)

score 1 · Answer 1 · answered Feb 12 '13 at 05:03

Instead of appending '#id' each time with window.location.href which is causing the issue in your case as for secoding time window.location.href already contains an id and you append another id to it. Use regular expression '/^(.*)#/is' on window.location.href to find the actual url before reload. Now use the logic you wrote i.e.

$.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'
        }
}

window.location.href = window.location.href + '#the_id'; doesn't even work though (see edited question - it doesn't refresh the page, it just changes the url in the address bar) — Luke Wenke, Feb 14 '13 at 03:07

felickz · Answer 2 · 2013-02-12T05:20:00.720

1

Bah to the regex example.. you know what they say when you fix a problem with a regex!

    if(window.location.hash){
window.location.href = window.location.href.replace(window.location.hash,"#mynewhash");}

window.location.hash will contain

the part of the URL that follows the # symbol, including the # symbol. You can listen for the hashchange event to get notified of changes to the hash in supporting browsers.

see mozilla docs

edited Feb 12 '13 at 05:20

answered Feb 12 '13 at 05:14

felickz

4,292
3
33
37

window.location.href = window.location.href + '#the_id'; doesn't even work though (see edited question - it doesn't refresh the page, it just changes the url in the address bar) – Luke Wenke Feb 14 '13 at 03:08

score 1 · Answer 3 · answered Nov 07 '14 at 01:23

The only hack I can think of is to save the scroll position indicated by window.scrollY and pass it to the next request (eg: using query string). Then you create a code that checks if this key exist, jump to that position using window.scrollTo(0, lastPos). It's not pretty and require a lot of code (and dirties your query string) if you don't use any javascript framework.

If you're doing this to periodically update the data, maybe it's worth redesigning your code to do ajax update instead.

Reload page but don't scroll to top in IE

3 Answers3