Dynamically change content and replace current URL

Question

So what I'm trying to achieve is have a list of links, where clicking any of them would change the content of a div to 'whatever'. That's easy, I've done that.

The part I'm having trouble with is getting some sort of permalink to the changed content.

 say main domain is www.example.com
 then you click link X and content Y shows up on the page
 then the URL should change to www.example.com/SOMETHINGHERE
 --all good so far--
 then using the new link should take you to the site with the changed content

let's get some sample code :

<a href="something.html" class="linx" >Click me</a> 
<a href="something2.html" class="linx" > Click me too</a>
<div id="loadhere"></div>

$('.linx').click(function (event) {
    event.preventDefault();
    $('#loadhere').load(this.href);
});

Pretty basic stuff. That's the way it works. Now I've googled a bit, and it seems I need to use the history API or even the history.js library. I've tinkered a bit, but I'm a newb and the whole History thing is a little confusing.

An example close to what I want to achieve is Soulwire's personal website. Navigate to the experiments section and see how running each one, works.

So basically what I'm asking is whether you could help me use the history api (if this is actually the way do this -- I may be wrong) by perhaps giving me an example or something more than linking the documentation, or if there's another way I could try to achieve this.

Thanks in advance.

This SO [question](http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page) may help you. — Sinan Guclu, Jul 14 '16 at 11:01
`window.history.pushState("object or string", "Title", "/new-url");` < Revolves around using this to change what is in the address bar and using JS to control what is on screen/ — Sinan Guclu, Jul 14 '16 at 11:03

Sinan Guclu · Accepted Answer · 2016-07-14T11:15:48.610

Using the window.history.pushState() function you can change what is in the address bar. pushState() refers to the action of pushing a state the site was in to the history so the user can navigate with the browser navigation buttons:

history.pushState(stateObj, 'page title', 'pathname');

So implementing it into your code:

$('.linx').click(function (event) {
    event.preventDefault();
    $('#loadhere').load(this.href);
    // use push state here        
    var stateObj = {'foo': 'bar'};
    history.pushState(stateObj, this.href.replace('.html', ''), this.href);
});

The stateObject can store some data that defines the state your site was at, ie. a checkbox that was ticked or a scroll state.

You can access this object with history.state. So for the example above:

history.state.foo = "bar"

Note this is a modern web standard and step will have to be taken to ensure compatibility with older browsers.

Read more about history.pushState() here.

I see. I sort of understand this yet, one question: If I implement this and then send someone a link e.g www.example.com/something.html, and they've never accessed the website before, would that take them to the page with changed content or would it just feed them the index page with just a different url? — bDoe, Jul 14 '16 at 14:25
Actually I jusy figured it out. Turns out it was much simpler than I thought. Thank you for your help. — bDoe, Jul 14 '16 at 15:33

Dynamically change content and replace current URL

1 Answers1