Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AJAXify site

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.

like image 299
Alec Smart Avatar asked Jul 06 '09 20:07

Alec Smart


2 Answers

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.

like image 44
Jason DeFontes Avatar answered Sep 19 '22 18:09

Jason DeFontes


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

   }

}
like image 148
Kenan Banks Avatar answered Sep 20 '22 18:09

Kenan Banks