AJAXify site

Question

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.

Chamber

Don't know why this was downvoted, it's a perfectly legitimate question. – Pesade

the ajax bit is really beside the point, what you want to know is if php can read anchor tags and redirect. ie, can you test for mainpage.php#about_us (bookmarked link) and redirect to aboutus.php (direct link to content user was looking at when bookmared). I don't know the answer, but I suggest clarifying the question. – Gayelord

@musicfreak: agreed, I gave it an upvote to get it back into positive nums – Gayelord

Answer 1

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);
      });

   }

}

Cohune

in your example, when i use the back and forward buttons it does not remember the previous state. – Chamber

Answer 2

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.

Brahmanism

This is the crux of the question, that value needs to be retrieved onDocumentReady, and then used to activate the relevant ajax funkiness. – Anting

Answer 3

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 How to show Ajax requests in URL?

Gentilis

Answer 4

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)

Scepter

Answer 5

I wrote an article recently about this exact issue. The article is tutorial style. Using the hash change event, im showing how to add parameters to the url, which can trigger ajax requests with infinite number of parameters, therefore functioning in a pretty scaleable manner.

You can find more about it here at http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/

Part I covers how to respond to the hash links, while part II covers how to send the data in the hash url to an ajax request therefore allowing you to do pretty much anything you want out of the hash tags in your url.

Factoring

Answer 6

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.

Eulogy