1

I have a PHP file which returns me a JSON array based on the GET parameters set. I don't want to reload the page so I made a simple function using jQuery + AJAX to show the result in a div tag.

But there is a problem, because of using AJAX doesn't change the URL and the user won't be able to share the link.

The HTML is called 'calculate.html' and the GET URL would be something like this:

myweb.com/calculate.php?sex&female&age=23&brand=pull%26bear&msg=hello%20stackoverflow

I'd like to know what is the best practice to modify the URL of the HTML when the AJAX call returns the result. And when someone open this URL the HTML reads it and then executes the call with these parameters.

I've modify the .htaccess and this is the url of the html:

myweb.com/calculate/

And with the parameters:

myweb.com/calculate/female/23/pull%26bear/hello%20stackoverflow

Any tip, advice or help would be appreciated, and if you need more information, let me knoe and I'll edit the post.

George Cummins
  • 28,485
  • 8
  • 71
  • 90
mllamazares
  • 7,876
  • 17
  • 61
  • 89
  • Best practice would probably be to alter the `location.hash` of the URL -- this won't trigger a redirect, but you can parse the data in the hash separately on document.ready and re-run the AJAX based on what's there. Modern browsers have the ["hashchange" event](http://stackoverflow.com/questions/680785/on-window-location-hash-change?lq=1) which is triggered when the hash is altered, but [older browsers don't](http://caniuse.com/#feat=hashchange). – Blazemonger May 22 '13 at 14:48
  • Following @Blazemonger comment, you have the window.onhashchange event: https://developer.mozilla.org/en-US/docs/Web/API/window.onhashchange – A. Wolff May 22 '13 at 14:49
  • 2
    Alternatively for an HTML5 solution, use `history.pushState` together with the `popstate` event. But dare to care about your target audience since it is HTML5... – Kiruse May 22 '13 at 14:50
  • I would change calculate.php to return the HTML content instead of JSON, then you can just add the option to display it on a div or on a new tab, where the URL will be changed and the user can share the URL. – Naryl May 22 '13 at 14:51
  • So when the page is loaded I have to use location hash to check if there is some parameter seted, and each time I call the php with AJAX i'd use history.pushState() function. thats all? i miss something? – mllamazares May 22 '13 at 14:55
  • 2
    @Joëlle You *either* use URL hashes *or* the HTML5 push state API. Hashes are a hack but widely compatible, the push state API is the officially sanctioned mechanism to do this but only newer browsers support it. – deceze May 22 '13 at 14:57
  • But is possible to put more than one parameters in the URL using hashes? – mllamazares May 22 '13 at 15:06

2 Answers2

0

You can use a # tag in your url eg http://yoursite.com?param1=23#tempcode

So you can call the ajax code when the url has the #tag tempcode. In this way you can share your new url

user1790464
  • 544
  • 3
  • 3
-3

On complete of your AJAX request, you can redirect the page url using 

window.location.replace("myweb.com/calculate/female/23/pull%26bear/hello%20stackoverflow");
Nishant Kaushal
  • 286
  • 1
  • 5
  • 1
    He does not want a redirect. The URL is supposed to refresh without redirecting to a new URL. – Kiruse May 22 '13 at 14:51