Update URL on AJAX call?

Question

Right now the biggest issue I'm having with using AJAX is the fact that if I use AJAX on a page, go to another page, then use the browser's back button to go back anything that was changed with AJAX is gone.

I've thought about using the jQuery Addresss plugin to solve that problem but I don't like how it only amends the URL with "#whatever.html" instead of changing it completely.

Ideally, what I would like is to have the URL go from: "www.example.com/p:2/" to "www.example.com/p:3/" when I make the relevant AJAX call.

Is this at all possible?

I don't believe you can completely change the current URL without forcing a page reload (at least, not in a reliable way that will across browsers). I could be wrong, though. — brettkelly, Jul 15 '09 at 21:50
im not quite sure what you're wanting to do.. are you wanting to store page parameters, so you can persist the state of a page through navigation? — flesh, Jul 15 '09 at 21:55

score 23 · Answer 1 · edited May 23 '17 at 11:52

23

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

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

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

edited May 23 '17 at 11:52

Community

1
1

answered Jan 25 '11 at 01:14

Aleksey Razbakov

584
6
26

score 20 · Accepted Answer · edited May 23 '17 at 12:01

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

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

Let's say your url looks like

http://example.com/mypage/

If you change the window location programmatically to

http://example/mypage/1/

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

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

Let's say you have a URL like this,

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

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

So if you are on the page

http://example.com/mypage/

and change the URL to

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

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

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

score 5 · Answer 3 · edited Jun 30 '13 at 19:34

5

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

edited Jun 30 '13 at 19:34

balupton

42,415
27
116
167

answered Jul 13 '12 at 15:05

v4r

2,177
1
20
29

score 2 · Answer 4 · answered Oct 19 '12 at 16:20

2

pjax handles this gracefully in modern browser.

answered Oct 19 '12 at 16:20

duckegg

1,371
2
13
19

score 0 · Answer 5 · answered Dec 26 '16 at 12:04

After making AJAX call, we can update the Client URL using history.pushState. Please 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);

Update URL on AJAX call?

5 Answers5

Linked