CODEWITHSUNDEEP
javascriptapachehtml
user1302387
user1302387

Reputation: 358

refreshing a page after pushstate alters the browser url; it tells me page doesn't exist

I have read numerous tutorials and examples on popstate and pushstate and closely followed HTML5 doctors example at http://html5doctor.com/demos/history/ . The tutorial works great, and everything works fine for me when I try it on my own. But, say, after you click through a few of the links and you decide to refresh the page, I receive page not found. Is there more to the tutorial, like other folders existing somewhere else with more files? Basically what I did was copy the exact source from the tutorial link above, and put on my local server. Like I said, everything works fine traversing back and forth with the browser back and forward buttons and the pop and pushstate, but refreshing the page tries to load a page that doesn't exist. I read somewhere about altering the htaccess file to redirect to the index if the page doesn't exist, but it didn't work for me. Is there more I need for this to work on my own? All the code I am using is the exact same as the tutorials, so everything can be found there in the source

http://html5doctor.com/demos/history/

htaccess looks as follows

Options +FollowSymLinks  
<ifModule mod_rewrite.c>  
RewriteEngine On  
RewriteCond %{REQUEST_FILENAME} !-f  
RewriteCond %{REQUEST_FILENAME} !-d  
RewriteCond %{REQUEST_URI} !index  
RewriteRule (.*) index.html [L]  
</ifModule>

Upvotes: 2

Views: 2322

Answers (2)

Sean Hogan
Sean Hogan

Reputation: 2920

The behavior that you experience is a good demonstration that pushState is working. When you try to refresh the page you find that the URL didn't even exist on the server - the browser was faking it.

If you really want the demo to work on your server when you refresh pages, get rid of the .htaccess file and copy these files to your server:

http://html5doctor.com/demos/history/ -> /path/to/demo/index.html

http://html5doctor.com/demos/history/fluffy -> /path/to/demo/fluffy

http://html5doctor.com/demos/history/socks -> /path/to/demo/socks

http://html5doctor.com/demos/history/whiskers -> /path/to/demo/whiskers

http://html5doctor.com/demos/history/bob -> /path/to/demo/bob

Now, when you browser to http://your.server/path/to/demo/ you should see it working, even if you navigate to say "fluffy" and then refresh the page. (Anyways, it works for me).

By the way, that tutorial is just an intro to pushState(), not an example to follow. As the author says

The code includes some simple styles and dynamically changes the content as you click the links. In reality, this could be loaded from your server via XMLHttpRequest, but for the purposes of this demonstration I’ve bundled it up into a self-contained file. The important part is that we have a quick-and-dirty dynamic page to work with, so let the fun begin!

A slightly better tutorial that you may have already seen is the Diving into HTML5 History intro.

However, you are probably going to use a js lib to handle pushState for you, so you may as well start with them. The two I am most familiar with are:

HTMLDecor is my project and isn't really a solution for pushState(). It's just that pushState() support comes for free (really) when you follow its guidelines for creating a site.

Upvotes: 0

Baraka
Baraka

Reputation: 374

The answer is simple. Make the page exist, or use .htaccess to 'pretend' it exists by loading a different URI.

When using pushstate, you are changing the url of the browser, but the browser is doing nothing to verify that this url actually exists. That is your job. Don't push a url to the browser which doesn't actually exist, or will not work on its own.

With regard to htaccess "not working for you" - you need to provide us more info on this. It is likely you haven't set it up correctly.

Upvotes: 4

Related Questions