5

I've found a lot of questions about changing the url (without reloading). Some answers were - use plugins, use location.hash ..., or with reloading

But none of them worked for me.

On website I have a dropdown menu, and on its change the url parameter should have changed.

So what I'm trying to do is:

I want to change: www.foo.com?country=Germany into www.foo.com?country=Slovenia without reload.

Is what I am trying to achieve even possible?

Ian
  • 50,146
  • 13
  • 101
  • 111
Sebastjan
  • 1,117
  • 2
  • 17
  • 24
  • 5
    You want to change what is visually showing to the user in the URL address bar? For what purpose? I can't imagine that based on security, browsers would allow that. Perhaps we can provide an alternative if you can provide a purpose. – Luke Shaheen Mar 29 '13 at 20:06
  • I have a list of countries (dropdown) and on its change, I want to change the url. Of what purpose? hmmm... all of the content on the site changes (without) reload, so I want to change the url too. – Sebastjan Mar 29 '13 at 20:08
  • 2
    Have you had a look at this answer? http://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page – Luke Shaheen Mar 29 '13 at 20:08
  • 1
    see this demo: http://html5demos.com/history –  Mar 29 '13 at 20:11

2 Answers2

4

You can in newer browsers; in older ones, you can only change the hash. This seems like a good article on the topic: http://html5doctor.com/history-api/

crimson_penguin
  • 2,728
  • 1
  • 17
  • 24
2

What you are looking for is the History API HTML5 provides. It comes with functionality like history.pushState(...), history.popState(...), which lets you dynamically change the URL without having to assign a new URL altogether.

It is used by many sites, including, I suspect, Facebook itself, where if you open a chat box, and navigate between pages, the chat box doesn't reload. It means that all new content are being fetched through Ajax, but then the URL won't change, would it? But it does. I think they do it through history.pushState(...), where you just push a new state into the History stack, and it changes only a certain part of the page. You will find an excellent tutorial here.

SexyBeast
  • 7,913
  • 28
  • 108
  • 196