Wednesday, June 15, 2011

Hashtag Ajax using JQuery

Hashtag Ajax being more popular nowdays. Gmail, Twitter, and other modern Ajax websites applying this method in their web. So what is Hashtag Ajax?

Hashtag Ajax is an Ajax based page navigation without sacrificing SEO, browser bookmarking and back button.

So what its look like? and how it works?

Look at this following example:

http://example.com/index.html
http://example.com/about.html
http://example.com/contact.html

Instead of having those conventional URL which require browser reload when navigating each other, Hashtag ajax would use this following URL (example):

http://example.com/#!:/index.html
http://example.com/#!:/about.html
http://example.com/#!:/contact.html

Hash symbol (#) in URL commonly used as an anchor to a section of a webpage. Without javascript all above links just load the same page index.html.

Thanks to window.location.hash and JQuery ajax (or other who uses XmlHttpRequest) we can use hash to navigate pages. A simple way can do this: getting the hash value, remove the string code (in this example is #!:) and load the resulting path into JQuery.load().

I wrote a script that scan all a links with #!:[path] pattern and bind the click function using JQuery to load target pages into target div.

// call init
$(init);

function init() {
  ajax_page_handler();
  page_load($(window.location).attr("hash")); // goto first page if #!: is available
}

function page_load($href) {
  if($href != undefined && $href.substring(0, 3) == '#!:') {
    $('#content').load($href.substring(3)); // replace body the #content with loaded html
    $('html, body').animate({scrollTop:0}, 'slow'); // bonus
  }
}

/**
 * This method load #content on every url hash change
 * 
 * @return
 */
function ajax_page_handler() {
  $(window).bind('hashchange', function () {
    $href = $(window.location).attr("hash");
    page_load($href);
  });
  // this allow you to reload by clicking the same link
  $('a[href^="#!:"]').live('click', function() {
    $curhref = $(window.location).attr("hash");
    $href = $(this).attr('href');
    if($curhref == $href) {
      page_load($href);
    }
  });
}

Now, build your websites, download JQuery, and load JQury and this script inside your pages.
And then change all url to use #!:, dont forget to have main div #content as a place where content loaded and Bang!. You have a simple Ajax website.

Download the example here (http://dl.dropbox.com/u/3579854/hashtag.zip)

11 comments:

  1. hasbang url mak bukan hashtag ajax. bookmark dulu, besok-besok kalo mo dipakai baca ini.

    ReplyDelete
  2. Bener juge, Thanks broth. Gua gak tau istilahnya sbb. But anyway, googling with "hashtag ajax" also comes with quite relevant results ;-)

    ReplyDelete
  3. Do you have a working example of this? I've been struggling with this issue for days now trying to implement dynamic pages and hash tags.

    Thanks,
    -Paul

    ReplyDelete
  4. Hi Paul, please download the sample here : http://dl.dropbox.com/u/3579854/hashtag.zip

    ReplyDelete
  5. hi, this is very usefull article, thank you. But doesnt work in ie7. i realy need something like this

    ReplyDelete
  6. Thanks for the wonderful article! I was looking for this for a very long time. I tried it and it works almost well, except in IE! I had to click each link twice in order to visit to other pages. Do you have any solution to this? Please share with us! Thanks!

    ReplyDelete
  7. wow cool.... but how to add text like "please wait....." when page is loading.....?

    ReplyDelete
  8. Pak Sukman, :-) saya menggunakan hastag yang bapak ajarkan untuk tab, tetapi saya memiliki masalah ketika berada di nested tab... karena ada beberapa tab saya memiliki sub tab.... :-) Kalo masalah untuk bacaan "please wait...." sudah teratasi....

    ReplyDelete
  9. Yay! This saved me! thanks so much

    ReplyDelete