create gmail like app using html5 history api and hashbang

Today i solved one mystery which was bouncing around in my mind since the day i saw gmail. How come google guys handle all the gmail operations without refreshing the page even once ? I was under impression that this should be something divine, like i was thinking about one of the facebook’s script, add friends to the list. In case of facebook it was sight cheating but in case of google its not sight cheating its purely a technology, no doubt about it. I was expecting that google guys might have written some javascript compiler or something huuuuge for manipulating gmail and other things, but when i read about HTML5 i came to know the secret behind gmail’s no-refresh concept. Gmail is taking good advantage of javascripts onhashchange event and newly launched HTML5′s History API. Lets reveal the secret behind <h2>”create gmail like app using html5 history api and hashbang”.</h2>
    Same thing can be achieved with Ajax but there are few drawbacks of using ajax, so to achieve the same effect we might need to code more lines of code. 2 main drawbacks of ajaxthat can create headache for us.1) Ajax requests did not automatically register themselves with the browser’s history engine, so clicking the browser’s “back” button may not have returned the browser to an earlier state of the Ajax-enabled page, but may have instead returned to the last full page visited before it.
2) Dynamic web page updates also make it difficult to bookmark and return to a particular state of the application.To overcome these drawbacks HTML5 has introduced History API

Second this that we need to know about is hashbang urls (aka hashtag) Hashtag is the backbone of many famous web apps like Google Analytics and well known application twitter. Have you noticed urls like https://twitter.com/#!/amitspatil, https://twitter.com/#!/following, https://twitter.com/#!/followers etc.

create gmail like app using html5 history api and hashbang

gmail html5 history api hashbang

gmail html5 history api hashbang 1

Ok, I stop explaining the things (go to the bottom and find more links to study HTML5 history API and hashtags) lets come to the topic, and lets create gmail like app using html5 history api and hashbang. Here i am posting code that we have used to create gmail like app using html5 history api and hashbang.

$(document).ready(function(){
    $(function(){
        Path.listen();
    });

	Path.rescue(function(){
        alert("404: Route Not Found");
    });

	Path.map("#/:page").to(function(){
        var action = this.params['page'];
        if(action == "save-contact"){
            params = "action="+action+"&"+$("#add-contact").serialize();
            redirect="#/contacts";
        } else if(action == "delete-contact"){
            params = "action="+action+"&id="+selectedContacts;
            redirect="#/contacts";
        }else{
            params = "action="+action;
        }
        send_request(params,action);
    });

    Path.map("#/:page/:id").to(function(){
        var action = this.params['page'];
        var id = this.params['id'];
        if(action == "update-contact"){
            params = "action="+action+"&id="+id+"&"+$("#update-contact").serialize();
            redirect="#/contacts";
        } else if(action == "contacts"){
            params = "action="+action+"&pg="+id;
            redirect="#/contacts/"+id;
        } else if(action == "delete-mail"){
            params = "action="+action+"&id="+id;
            redirect="#/inbox";
        } else{
            params = "action="+action+"&id="+id
        }
        send_request(params,action);
    });
    $(".contents").css("height",$(window).height() - $(".contents").offset().top);
    $(".contacts-list tr").live("click",function(){
        location.href = "#/view-contact/"+$(this).attr("id");
    });
    $(".mail-list tr").live("click",function(){
        location.href = "#/view-mail/"+$(this).attr("id");
    });
    $(".contacts-list tr input").live("click",function(e){
        e.stopPropagation();
    });
    $(".sender-name").live("mouseover",function(event){
        $(".user-info").css("top",event.pageY+4).css("left",event.pageX+4).show();
        $(".user-info div:first").html($(this).next().html());
    }).live("mouseout",function() {
        $(".user-info").hide();
    });
    $("#sel-contact").live("click",function() {
        $(":checked").length > 0 ? $("#delete").fadeIn("fast") : $("#delete").fadeOut("fast");
        selectedContacts = "";
        $(":checked").each(function(){
            selectedContacts += $(this).val()+",";
        });
    });
    $("#mail-contents a").live("click",function(e){
        e.preventDefault();
        window.open(e.currentTarget.href);
    });
});
Note : This demo “create gmail like app using html5 history api and hashbang” is only supported in major browsers which supports HTML5.

 

View Demo Download

 

More References for HTML5 history API and Hashbang (Hashtag)

1) Manipulating the browser history
2) Introducing the HTML5 History API
3) window.onhashchange
4) Intelligent State Handling

About Amit

   Myself Amit Patil from Maharashtra (India). I have been working as a Web Application Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically i am a PHP developer but now a days exploring more in CSS and javascript.

Comments

  1. I have liked the page!!! :) Can you now give me this script :wink:

  2. Yigit it works in firebox but not in chrome

    • You can see, Mine demo is working in forefox, chrome, opera, IE. Do u see any java script error in crome developer tool ??

  3. yes ,

    jquery-1.7.1.min.js:2Uncaught SyntaxError: Unexpected identifier
    script.js:1Uncaught ReferenceError: $ is not defined

    • $ is not defined” means jquery is not included…check with ur jquery path. Also check if u are including jquery file multiple times and different version. Are u using this demo in any existing app or standalone ? standalone should work.

  4. Mm, nope. There is no error message as I can see. After clicking the “Like” button, the form gets static and can’t even click it. Using opera latest btw. You mind send it to me by mail?

    • Sorry yigit i was confused and thought u and sankalp sharma are same person :P can u please send me ur email id via contact form so i can send u the code.

  5. Ok amit and yigit thanks now it is started working! :)

  6. actually i am a 12 yrs old kid! who only know html5, css3 and javascript.

    • Its really amazing that u r just 12 :-o and still u know html, css , js. When i was in diploma first year…I didnt know which button starts computer. I spent that programming practical sitting idle :P

  7. hehehe yah but that is the truth :wink:

  8. for me you are my inspiration

  9. Hello

    I have one question

    Can you please tell me how to integrate google search in mystique search bar.

  10. i can’t download this script amit..please send to my email ..

    • I will send u the script on ur email. But can u please tell me which browser r u using, so i can solve the download issue for that perticular browser.

  11. Your requirement of clicking “like” is kinda anti-social. My facebook profile isn’t my professional profile. Also enforcing facebook membership to get your data is a pretty annoying thing as well.

    Share for the love of it or not at all.

    • @Dano: I am not agree with your comment. I am just asking to “like” it, its not facebook app that stores your email id, info, photos etc, its just simple “like”, and we “like” 10+ things (sometimes useless things) a day on fb, i am just asking one more like from you. I am requesting users to like my page, this way i will get one visitor and they will get new script, I want my scripts to reach more and more users. And last thing its not at all forceful, u can click like button, download will start and then u can unlike it, that also do, or second thing is if you dont want to click that “Like” button at all you can request the script for free.

      • Not everyone has a Facebook account, but the like button mechanism failed anyway.
        Honestly, if your script is as shonky as this website, who’d even want it?

        • 1) Not everyone has a Facebook account – Almost everyone has fb account. Just in case if someone dont have it they can request code for free.
          2) Like button mechanism failed – Its working, May i know, Which browser and version you are using.
          3) as shonky as this website – Nothing is perfect. Sorry for the inconvenience caused to you browsing site.
          4) if your script is as shonky as this website,who’d even want it – If you dont want it then you dont have to worry about anything. Thanks for your time writing this comment, even if this script was of no use for you at all.

  12. Nikola_Tesla says:

    @Dano I wonder how stupid you are!!!!!!!!!!
    Someone gives to you ABSOLUTELLY FREE an amazing script and you consern FOR IT??????
    Are you so fool???????????????????????????????

    @ Mr Amtl you ve done a great script !! MANY THANKS AND KEEP UP!!!
    YOU ARE A HERO!!!!!!!!!!!

  13. aigboje abubakar says:

    hi AMIT Grate work man, i have like the page but did not respond, and i have send it to mail as the alternative but did not start the download as it expected. Thank

  14. I need funtionality like create mail with all those facilities to,subject,content and multiple attachment,
    in to email suggation box with image name and email id same as gmail.Can u help me with that?
    myno is 08095782748

  15. i liked it but it failed to download

  16. i like your apps can you give me gmail like registration page and login page

  17. Hi Amit, Please send the Script (gmail like app using html5 history api and hashbang) to my Email.. Do i need to learn anything to use this script? Thanks

  18. the gmail-like app is not working for me ..Send me the code on my email ,i like fb but nothing works

Trackbacks

  1. [...] create gmail like app using html5 history api and hashbang [...]

Speak Your Mind

*


*

Notify me of followup comments via e-mail. You can also subscribe without commenting.

More in Ajax, CSS, HTML, html5, jQuery (18 of 43 articles)
facebook like status update link extractor


Actually there's nothing special about this, what you are looking isnt what i want to explain, i mean my main ...