Change URL in address bar without having to reload [duplicate]

Question

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?

Answer 1

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/

Answer 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.