AJAXify site

Question

Hello,

I have legitimate reasons to do what I am trying to explain. I have an existing site say abc.com which has regular pages etc. everything written in php. Now I would like to AJAXify the site i.e. when a user clicks on a link, it should fetch the link using AJAX and replace the page contents. This is the easy part and I can achieve it using jQuery get function.

Now the problem comes when the user bookmarks the page. I can use hash tags to specify if the user is on another page, but instead of using javascript to fetch the new page again, is it possible to fetch it directly using PHP when the page is called.

Can you please give me an outline on how to achieve the above. This functionality is similar to what Facebook has.

Thankyou for your time.

Answer 1

The best way to do this is to have one index.php that loads all other pages based on the URL parts after it. For instance:

http://www.example.com/index.php/reports/employees/hoursWorked

In this case index.php will run, it can see what's being requested is is the hours worked report, and load that content. The problem is, if index.php then loads all other content after that using AJAX, the URL in the browser will never change.

One way around that problem would be to put a "Link to this page" link on every page that contains that form of URL for users to bookmark.

Answer 2

Well you can use one of these tools or roll your own. Uses window.location.hash along with other tricks.

• YUI - Browser History Manager
• Really Simple History (RSH)

Answer 3

It's a fairly simply process of (1) Parsing the hash tag, and (2) Loading the content via Ajax as you normally would.

If you load more content when the user clicks on the page, just be sure to always correctly modify the hash tag to reflect what's on the page.

Here's a quick example to play around with. Click on a name and note the hash tag. The relevant Javascript looks like this :

// Go straight to content if it's in the hash.
$(document).ready(function(){
   load_story_from_hash();
});

// Call this function whenever user clicks on a hash link
function set_hash(hash){
   window.location.hash = hash;
   load_story_from_hash()
}

// Actually load content based on the hash in the URL
function load_story_from_hash(){

   var hash = window.location.hash;
   hash = hash.replace(/^#/, '');

   if (hash) {

      $('#post_container').load(hash+'.html', {}, function(){
         $.scrollTo('#post_container', 1000);
      });

   }

}

Answer 4

The answer is no, you can't get the value of the URL hash server side. See How to get Url Hash (#) from server side.

You'll have to get the hash value client-side and make an extra request.

Answer 5

jQuery History is my preferred choice. It can be found here: http://www.balupton.com/projects/jquery-history/ Provide cross browser support, binding to hashes, overloading hashes, all the rest.

There is also an Ajax extension for it called jQuery Ajaxy, allowing it to easily upgrade your webpage into a proper Ajax application without need for server side changes and remaining SEO and JS-Disabled friendly: http://www.balupton.com/projects/jquery-ajaxy/

This is the solution chosen by such sites as http://wbhomes.com.au/ and http://www.balupton.com

Overall they are both well documented, supported and feature rich. They've also won a bounty question here http://stackoverflow.com/questions/3205900/how-to-show-ajax-requests-in-url/3276206#3276206