/    Sign up×
Community /Pin to ProfileBookmark

AJAX: domain.com/#/page1

Copy linkTweet thisAlerts:
May 15.2011

Take a look at [URL=”http://rdio.com”]Rdio.com[/URL] and look around. When changing page the part after the /#/ changes to what page your on.

Example: [url]www.rdio.com/#/about[/url]

I would like to do the same. I have been trying to find out how to do this for ages and cannot find anything to help me. I have just started using ajax.

Can anyone just give the names of what i need to look at to find out?
or can you give me a bit of example code?

thanks,

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@aj_nscMay 15.2011 — The theory behind it is very simple. There's only two "parts" that you need to understand:

  • 1. When a page loads, use document.location.hash to get the value after the #. Use an AJAX request to get the content based on the value of document.location.hash. This allows users to bookmark pages and send links to your pages through e-mail.


  • 2. When you click on a link on the page, set document.location.hash to the value of where the link points, and then use AJAX to grab that content and update the current page. [B]Very important[/B] to make these links degradeable so that if the visitors doesn't have JS enabled, or is a search engine bot, it will still be able to index the content.


    • An easy way to do this is to have a site with the structure:

    mysite.com

    mysite.com/blog

    mysite.com/blog/my-article

    When the user clicks on a link that points to mysite.com/blog - update the hash tag so the url looks like mysite.com/#/blog and then grab the content from mysite.com/blog and update the current page with it. Keeps everything easy to understand this way.

    I've implemented something quite close to this in the past, and this is exactly how I've done it. sammy.js provides a framework for this type of thing, although I've never played around with it myself.
    Copy linkTweet thisAlerts:
    @iBlankyauthorMay 15.2011 — Thanks! but im still a little confused.

    On the first page, mysite.com, i have links to the sammy.js and jquery, and a normal link,<a href="blog/article.html">Artical</a>. But how am i meant to get the value of the #?

    Is this right?[code=html]<script>
    document.write(location.hash);
    </script>
    [/code]

    Also how can i make it so ajax loads the part after the #/ ?

    I understand the concept of which you explained, but don't know how to write it as code

    Sorry i am not good at ajax/javascript yet
    Copy linkTweet thisAlerts:
    @aj_nscMay 15.2011 — Leave the link as blog/article.html...that's fine.

    However, apply a global event listener to all internal links on your site. The following is an EXAMPLE only:

    <i>
    </i>$('a.internal').live('click',function(e) {
    e.preventDefault(); //stop the clicking of the link from processing

    var page = this.href;
    document.location.hash = '/'+page; //example.com/#/blog/article.html

    $.load(
    page + '#content',
    function(r) {
    //replace your content with the value of r
    }

    });


    In the above code, you're going to have to look up jQuery's load function if you don't understand it.

    Now, the type of system you would like to develop is not a simple feat unless you've got a strong background in JS (not just jQuery) because you've got to understand what everything is doing.

    If you are trying to piece this type of application together from snippets (like the one above), I'd advise you not to, as it can get quite complex.

    The best thing you can start with is the concept. You said you've got the concept so that's a big hurdle done...after that, just look up what code you'll need to execute your process.
    ×

    Success!

    Help @iBlanky spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.16,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...