pushState weird issue

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)
LVL 58
GaryAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
First line of the javascript loading the content of the page, place an alert(or add a console.log).
You should easily understand what happening

I think your ajax get the url to choose what to load but that doesn't match with the history page(its original content)
0
GaryAuthor Commented:
Sorry leakim thought I had replied to this.
What I don't understand is why when I refresh the page and click back I am not getting the previous page HTML.
I think I need to do some deep research into how this works.
0
leakim971PluritechnicianCommented:
My thought :
The refreshed page content is different than the content replaced by ajax
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.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

GaryAuthor Commented:
This is really annoying.
I've uploaded a test page
http://www.book-your-trip.com/master.php

Click the button and you get the ajax response, click back and it resets the page (nothing is reloaded) All good.

Click the button, refresh the page, click back, the page content doesn't change even though history.pushState is being fired.  It is definitely not loading because you cannot access the master page divs.
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.
0
leakim971PluritechnicianCommented:
I got it working with the following code snippet.

As you said, you need to store the "state/view/part"
You need to save it before altering (line 9 must be before line 10)

<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script>
	$(function(){
		history.replaceState({ "view":$("#view").html() }, null, "/master.php");
		$("#button").click(function(e) {
			$.get('/myajax.php', function(response) {
				history.pushState({ "view":$("#view").html() }, null, "/myajax.php");
				$("#view").html(response);
			});
		});
	});

	$(window).on("popstate", function(event) {
		var state = event.originalEvent.state;
		if(state && state.view) {
			$("#view").html(state.view);
		}
	});

</script>
</head>
<body>
	<div id="view">
		<div class="hideme">This is the master page</div>
		<input type="button" id="button" value="Click Me to load the ajax">
	</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GaryAuthor Commented:
Thought yeahhh!!!
But it's not working leakim, changes uploaded - same problem.

Even more weird if you click back again and then click forward the page does load properly.
0
leakim971PluritechnicianCommented:
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.

Somewhere in Apache, look for This should be changed to whatever you set DocumentRoot to:

#
# This should be changed to whatever you set DocumentRoot to.
#
<Directory "path/to/httpd/htdocs">
    Options Indexes FollowSymLinks ExecCGI

    AllowOverride None

    Order allow,deny
    Allow from all

    Options +FollowSymLinks -MultiViews
    RewriteEngine On

    RewriteRule ^([^/\.]+)/?$ master.php [L]

</Directory>

Open in new window

0
GaryAuthor Commented:
Uhmm, but the page should be in the history when you click back.
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

I don't use Apache. Not seeing what document root would do.

I just had a play with history.js and it has the same problem, refresh the page and click back and its lost.

edit.
I think I am getting somewhere...
0
leakim971PluritechnicianCommented:
Uhmm, but the page should be in the history when you click back.
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

When you're doing the reload, you're not anymore on the original page but on another one, your simple myajax.php

When not doing the refresh you're on the original page but you just add history (pushed new url which is different from "page caching")

yes, state and page caching are not the same thing
state add URL in history but not content until you save it yourself and associate it with the page

What is your php server? IIS ?
0
GaryAuthor Commented:
I use nGinx

you're not anymore on the original page but on another one
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.
0
leakim971PluritechnicianCommented:
I think the logic is broken as soon you refresh the page
0
leakim971PluritechnicianCommented:
For nGinx : https://gist.github.com/shreyas-satish/8452999
# Re-route nested routes through index
  location / {
    try_files $uri $uri/ /index.html =404;
  }

Open in new window

0
GaryAuthor Commented:
Don't see what routes have to do with it. Anyway that is a default configuration on nginx.

But I think I am getting somewhere. I need to have the pushstate code in the refreshed page, but not in the ajaxed page.
Only problem now is if you refresh and click back (which now works) and then click the button I get a state error, but I think that's down to the code somewhere.
0
GaryAuthor Commented:
Seems to be working fine now, just need to get the forward button working now.

Thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.