How can I replace a window's URL hash with another response?

Question

I am trying to change a hashed URL (document.location.hash) with the replace method, but it doesn't work.

$(function(){
 var anchor = document.location.hash;
 //this returns me a string value like '#categories'

  $('span').click(function(){

     $(window).attr('url').replace(anchor,'#food');
     //try to change current url.hash '#categories'
     //with another string, I stucked here.
  });

});

I dont want to change/refresh page, I just want to replace URL without any responses.

Note: I don't want to solve this with a href="#food" solution.

Solution 1

Either use location or window.location instead of document.location as the latter is a non-standard.

window.location.hash = '#food';

This will replace the URL's hash with the value you set for it.

Reference

Solution 2

You may prefer the answer of this question.

The difference being that with history.replaceState() you don't scroll to the anchor, only replace it in the navigation bar. It's supported by all major browsers, source.

history.replaceState(undefined, undefined, "#hash_value")

Comments

[Spooky]

+1 It seems the OP was simply unaware that this method doesn't "change/refresh page".

[Fabrício Matté]

Plugin? What is it supposed to do?

[Fabrício Matté]

@barlasapaydin By how your question currently stands, this is the only answer I can think of. If you update the question with more info I'll take another look. Meanwhile I'll grab something to eat.

[Spooky]

@barlasapaydin ensure that the code is being called and ensure that you navigate to a fresh instance of the page (remember you have a hash in your current URL, so remove it before refreshing).

[Spooky]

If you wish the change the hash within the URL when the user clicks an anchor tag, why not just use <a href="#bar">Foo</a>?

[Fabrício Matté]

+1 Spooky, even though if he is developing a plugin, he may not be able to edit the page's source.

[Spooky]

That's a good point, Fab. Edit your post to include his code, with your single line added - I think that's what he's waiting for.

[Barlas Apaydin]

@Spooky o really why i coundt think that !! dude i need to change it with this way.. otherwise i didnt ask this question.

[Barlas Apaydin]

@FabrícioMatté stackoverflow.com/questions/11338967/… read this and be sure that i am not having problems with plguin.

[Fabrício Matté]

@barlasapaydin I'm taking a look at your plugin, apparently you had a syntax error - fiddle what is it supposed to do again? Just move the links down? And is it related to this question somehow?

[Spooky]

@barlasapaydin Fab wasn't implying that you're having issues with a plugin - he was merely asking what your plugin's intentions are, so that he knows what the limits are (such as whether or not you have direct access to the HTML).

[Barlas Apaydin]

okey, i have got cache problem. got fixed. thank you for your answer @FabrícioMatté

[Fabrício Matté]

@barlasapaydin No problem, also jsfiddle.net/ult_combo/5yKr6/1 (I edited your plugin slightly, not sure if that's what you asked me for anyway)

[Fabrício Matté]

Here's a cleaner and more well-commented version: Fiddle. And off-topic, first downvote I have got in one of my upvoted answers so far, how cute :) (I'm not complaining about anonymous downvoters, but if you feel that I can improve my answer, then comment it).

[Fabrício Matté]

Removed the href anchors which @Spooky suggested due to OP's new question update, oh well. That was a very nice and quick thinking to solve it though, thanks Spooky. =]

[Spooky]

Thanks. I wish to point out that I upvoted your answer as soon as you posted it. Good job Fab :)

[Blake Frederick]

Curiously document.location.hash worked for me whereas window.location.hash did not.

[Rudi Ørnhøj]

This answer should be set as accepted - by using this method no change is made except the change of the hash value. This goes double, since the original question contains this condition: "I dont want to change/refresh page, I just want to replace URL without any responses."

[vpxfhu77]

Indeed this solution in great, especially if there is no need to add new history entry. I also noticed that # is need to be at the end of url this line work.

[JMadelaine]

Probably need something like: window.history.replaceState(undefined, '', ${window.location.href.split('#')[0]}#${new URLSearchParams(newParams).toString()})

[Adam Richard]

Worth mentioning that including the "#" is not needed. window.location.hash = 'food'; will also work and is the recommended way.