Reputation: 507
Using the following tutorial I want my website to use AJAX to load the content (but also want to be able to use the back button etc. etc): http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp
Ofcourse if someone has javascript disabled the website should also work (without Ajax).
The problem however comes when a javascript enabled user sends a link to a non javascript enabled user. Because javascript is disabled it will not handle the #-tag correctly and will just go to the homepage (so linking directly to pages from a javascript user to non-javascript user is impossible). Is there a way to resolve this issue (preferably php or htacces).
Upvotes: 1
Views: 257
Reputation: 14877
HTML5 gives us methods to alter the URL without refreshing the page https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries
This means you can update something without a page refresh but still give the user a url they can bookmark or send to someone else. These urls will work without JavaScript, as long as you have pages at those locations or are catching them with mod_rewrite or similar.
https://github.com/browserstate/history.js is a great little pollyfill which will use the HTML5 history stuff if the browser supports it, otherwise (Internet Explorer) it changes the hash of the url.
Upvotes: 2
Reputation: 53940
Basically, three steps:
<a href='about'>About us</a>
click
events on <a>
tags and navigate to #
+ this.href
. So when they click the above url, you navigate to site.com/#about
instead of site.com/about
Since you code your html just as usual, the site remains fully accessible for non-js users, and, more important, for search engines' bots.
In response to the comments I can suggest the following:
site.com
to site.com/js/
<a href='about'>
is clicked, navigate to site.com/js/#about
<a id=about href="/about">click here</a>
for non-js usersUpvotes: 1
Reputation: 39389
Why not just build your application normally and then add the AJAX on top, rather than going the other way round and causing more work for yourself?
Ask yourself, why do you need AJAX page transitions? Does your app actually need them, or is it just because you've seen it on another site, like Twitter?
Upvotes: 0