[ACCEPTED]-Update URL on AJAX call?-url-rewriting

Accepted answer
Score: 23

It's possible with HTML5. You can test as 5 example GitHub or Vkontakte site.

The best 4 answer is here: Change the URL in the browser without loading the new page using JavaScript

It says that you can use 3 history.pushState function for those purposes. But 2 this solution will only work in HTML5 compatitable 1 browsers. Otherwise you need to use hash-method.

Score: 20

Nope, this is not possible. Update: It is now possible via the HTML5 History API - see razbakov's answer.

I hope you realize 21 that you are trying to address an extremely 20 difficult problem.

Let's say your url looks 19 like

http://example.com/mypage/

If you change the window location programmatically 18 to

http://example/mypage/1/

Browser will take over and try to navigate 17 to that page, there goes your fancy ajax 16 code!

So what's the alternative? You use 15 URL fragment.

Let's say you have a URL like 14 this,

http://example.com/anotherpage/#section

Browser will first load http://example.com/anotherpage/ and try to 13 find an anchor named 'section' and scroll 12 to that location. This behavior is exploited 11 by the 'Addresses' plugin. This is similar 10 to how those 'Scroll To Top' links work.

So 9 if you are on the page

http://example.com/mypage/

and change the URL 8 to

http://example.com/mypage/#1

Browser will not load new page but rather 7 try to find anchor named '1' and scroll 6 to that anchor.

Even if you have managed 5 to add fragments to the URL, it doesn't 4 mean the work is done. If the user presses 3 the back button, DOM will be reset and you 2 will have to parse those fragments and recreate 1 the DOM. It's definitely non-trivial.

Score: 5

This problem can be solved using history.js. https://github.com/browserstate/history.js

0

Score: 1

pjax handles this gracefully in modern browser.

0

Score: 0

After making AJAX call, we can update the 2 Client URL using history.pushState. Please 1 find the below syntax and example

Syntax: history.pushState(obj, obj.Title, obj.Url);

Example:

var url = "http://example.com/mypage/" + "newParameter=newValue"
history.pushState(undefined, '', url);

More Related questions