TIP: Use Markdown or, <pre> for multi line code blocks / <code> for inline code.
Using # in Routes
  • alexstonealexstone
    Hey guys. I'm trying to create a route that uses '#' as a separator instead of the traditional slash (/).

    Here's an example URI I'm trying to acheive:
    /gallery/galleryname#photoid

    Basically, I'm doing some javascript stuff using window.location.hash so I need to be able to use the hash in my route.

    Any ideas?
  • shadowhandshadowhand
    Nope, not possible, everything after a # in a URI is not passed to the server by the browser.
  • DrPheltRightDrPheltRight
    In JS you could simply pass the hash as a GET parameter in an AJAX request.
  • AkkiAkki
    Even if it was passed it would make no sense. When you write http://example.site.com/something#blahblahtext the blahblahtext refers to a ID of a element on a page and will focus the screen on that element. Obviously, you can't have two sharp signs in there.
  • alexstonealexstone
    @shadowhand I don't think it's impossible. Facebook uses this method to achieve their photo gallery (instead of reloading the page for each URL, it switches out the content and changes the window.location.hash property through Javascript). Also, all of the documentation I found while researching this suggests I should be able to just comment out the # with \#, but I can't make that work for my routes.

    @Akki That would only jump if there was an element on the page with the same ID as the #. Again, this is how Facebook achieves their gallery browsing.

    @DrPheltRight I think you're right. I was playing with this idea, but didn't want to do it this way. I'll have to AJAX load the content based on the window.location.hash, it seems.

    Thanks guys for all your help! I've been lurking here for a while and this was the first time I've asked about anything. Great community!
  • czukowskiczukowski
    I think Facebook just requests "normal" routes, without the hash symbol, which is translated based on the window.location.hash property.

    Something similar is happening in Google Translate. If you load this URL: http://translate.google.com/#en|fr|once%20upon%20a%20time and watch the Network tab in Firebug, you'll see it actually requests http://translate.google.com/translate_a/t?client=t&text=once upon a time&hl=cs&sl=en&tl=fr&multires=1&pc=0&sc=1
  • DrPheltRightDrPheltRight
    @alexstone If you are using jQuery, you could use something like this History plugin to achieve what you want quite easily.
Add a Comment