www.webdeveloper.com
Results 1 to 4 of 4

Thread: AJAX: domain.com/#/page1

  1. #1
    Join Date
    Sep 2010
    Posts
    27

    Angry AJAX: domain.com/#/page1

    Take a look at Rdio.com and look around. When changing page the part after the /#/ changes to what page your on.

    Example: www.rdio.com/#/about

    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,

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    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. Very important 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.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Sep 2010
    Posts
    27
    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?
    HTML Code:
    <script>
    document.write(location.hash);
    </script>
    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

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    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:

    Code:
    $('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.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles