<div>
First line of the javascript loading the content of the page, place an alert(or add a console.log).<br />
You should easily understand what happening<br />
<br />
I think your ajax get the url to choose what to load but that doesn't match with the history page(its original content)
</div>


<div>
Sorry leakim thought I had replied to this.<br />
What I don't understand is why when I refresh the page and click back I am not getting the previous page HTML.<br />
I think I need to do some deep research into how this works.
</div>


<div>
My thought :<br />
The refreshed page content is different than the content replaced by ajax<br />
That why I asked you to put a breakpoint before your ajax call so you will be able to check the DOM before the ajax call.
</div>


<div>
This is really annoying.<br />
I've uploaded a test page<br />
<a href="http://www.book-your-trip.com/master.php" rel="ugc">http://www.book-your-trip.com/master.php</a><br />
<br />
Click the button and you get the ajax response, click back and it resets the page (nothing is reloaded) All good.<br />
<br />
Click the button, refresh the page, click back, the page content doesn't change even though history.pushState is being fired. &nbsp;It is definitely not loading because you cannot access the master page divs.<br />
Do I need to store the previous page data and push that back to the page - if so it doesn't make sense as it should be there in the history already.
</div>


<div>
Thought yeahhh!!!<br />
But it's not working leakim, changes uploaded - same problem.<br />
<br />
Even more weird if you click back again and then click forward the page does load properly.
</div>


<div>
Your server need to deliver the master.php page everytime else, when you hit the refresh button you're reloading the Ajax page, not the master.php page where you're the code to put the right view content on popstate.<br />
<br />
Somewhere in Apache, look for <i>This should be changed to whatever you set DocumentRoot to</i>:<br />
<br />

<pre><code class="code-10 nolinks" id="code-20-39930041-1"><span>#</span>
<span># This should be changed to whatever you set DocumentRoot to.</span>
<span>#</span>
<span>&lt;Directory &quot;path/to/httpd/htdocs&quot;&gt;</span>
<span>    Options Indexes FollowSymLinks ExecCGI</span>
<span></span>
<span>    AllowOverride None</span>
<span></span>
<span>    Order allow,deny</span>
<span>    Allow from all</span>
<span></span>
<span>    Options +FollowSymLinks -MultiViews</span>
<span>    RewriteEngine On</span>
<span></span>
<span>    RewriteRule ^([^/\.]+)/?$ master.php [L]</span>
<span></span>
<span>&lt;/Directory&gt;</span>
</code></pre>
</div>


<div>
Uhmm, but the page should be in the history when you click back.<br />
It is there since if you click back twice (from the refreshed page) and then click forward the correct page shows from history. But not if you only click back once - the page isn't loaded from history even tho the source of the page shows the correct HTML<br />
<br />
I don't use Apache. Not seeing what document root would do.<br />
<br />
I just had a play with history.js and it has the same problem, refresh the page and click back and its lost.<br />
<br />
edit.<br />
I think I am getting somewhere...
</div>


<div>
<blockquote>
Uhmm, but the page should be in the history when you click back.<br />
It is there since if you click back twice (from the refreshed page) and then click forward the correct page shows from history. But not if you only click back once - the page isn't loaded from history even tho the source of the page shows the correct HTML<br />

</blockquote>
<br />
When you're doing the reload, you're not <b>anymore</b> on the original page but on another one, your simple myajax.php<br />
<br />
When not doing the refresh you're on the original page but you just add history (pushed new url which is different from &quot;page caching&quot;)<br />
<br />
yes, state and page caching are not the same thing<br />
state add URL in history but not content until you save it yourself and associate it with the page<br />
<br />
What is your php server? IIS ?
</div>


<div>
I use nGinx<br />
<br />

<blockquote>
you're not anymore on the original page but on another one
</blockquote>
So logic would dictate that if I click back (remembering I am not changing the history as their is no code on this refreshed page) then I should be loading the previous page.
</div>


<div>
I think the logic is broken as soon you refresh the page
</div>


<div>
For nGinx : <a href="https://gist.github.com/shreyas-satish/8452999" rel="ugc nofollow">https://gist.github.com/shreyas-satish/8452999</a><br />

<pre><code class="code-1 nolinks" id="code-20-39930288-1"><span># Re-route nested routes through index</span>
<span>  location / {</span>
<span>    try_files $uri $uri/ /index.html =404;</span>
<span>  }</span>
</code></pre>
</div>


<div>
Don't see what routes have to do with it. Anyway that is a default configuration on nginx.<br />
<br />
But I think I am getting somewhere. I need to have the pushstate code in the refreshed page, but not in the ajaxed page.<br />
Only problem now is if you refresh and click back (which now works) and then click the button I get a <i>state </i>error, but I think that's down to the code somewhere.
</div>


<div>
Seems to be working fine now, just need to get the forward button working now.<br />
<br />
Thanks
</div>


<div>
<div class="content wysiwyg-content">
Using pushState I load new content on the page and slide it over the current content and change the url. <br />
If I click the back button then everything happens in reverse and this is all fine.<br />
<br />
But if I load the new content (page slide), refresh the page and then click back, the URL changes correctly but it is still showing the refreshed page html. <br />
Looking in Firebug it shows the refreshed page html, looking at the source it shows the correct source of the page i.e. the previous page.<br />
If I click back again and then forward, the page reloads correctly.<br />
I'm confused!<br />
<br />
(where are you leakim)
</div>
</div>


Using pushState I load new content on the page and slide it over the current content and change the url. 
If I click the back button then everything happens in reverse and this is all fine.

But if I load the new content (page slide), refresh the page and then click back, the URL changes correctly but it is still showing the refreshed page html. 
Looking in Firebug it shows the refreshed page html, looking at the source it shows the correct source of the page i.e. the previous page.
If I click back again and then forward, the page reloads correctly.
I'm confused!

(where are you leakim)

pushState weird issue

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

JavaScript

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

jQuery

Asynchronous JavaScript and XML (AJAX) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With AJAX, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. HTML and CSS can be used in combination to mark up and style information. The Document Object Model (DOM) is accessed with JavaScript to dynamically display and allow interaction with the information presented.