Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

SO I'm about to put together a new site and I'd like to go about it by making a web application that parses /#!/ url's and requests content accordingly via AJAX calls to a JSON API that is already put together.

My questions are...

  1. What are the best practices concerning #! url's
  2. Are there any good JavaScript libraries that are built to handle Routing as well as History? or should I roll my own?
  3. What are the pitfalls I should be aware of?

Please no "/#!/ url's are breaking the internet!" comments , I've read Mike Davies Article as well as this one and this other one.

I want to hear from people who have already implemented this type of a url structure and can tell me about their experiences.

share|improve this question
7  
I prefer using the HTML5 history API (davis is a good library). The only downside is that IE doesn't support it so have to have real server-side routing for IE. –  Raynos Jun 30 '11 at 17:34
    
@Raynos Which version of IE? I don't have to worry about IE6. –  Greg Guida Jun 30 '11 at 17:40
    
IE9 does not support HTML5 history API. IE10 might if your lucky. –  Raynos Jun 30 '11 at 17:46

2 Answers 2

Although I think pushState based routing is, in most cases a preferable solution, I understand that sometimes hash based routing is a better fit.

As others have suggested you can use davis.js, which supports pushState based routing by default, but can work just as well with hash based routing if you need it, see the code here.

share|improve this answer
    
Wow, didn't expect the author of the library to come and help me out :) . I've already Implemented the site with Davis using push state and falling back to traditional routing. –  Greg Guida Jul 25 '11 at 13:19

Not sure if this will help, but I have been working on a dynamic page using the url hash to control page content. The dirty way I found to do this was to set the hash, for each new page, and poll the url for any hash changes. For example: I pull a number off the hash, and compare it to the current page number, if different the page changes. if location.hash = #page1 when actual page is 2 the page will change to 1 and the hash stays at #page1.

An important trick is to actually have the hash tags in the website html. Mine are all in one div at the top of the page. a name='page1' This is necessary to maintain the history.

This allows bookmarking and refreshes and such but will not allow search engine indexing. I have a rather convoluted method involving no script pages which can be indexed and are the source of the dynamic data, to accomplish this.

As long as it is done properly, it can work. The search engine support for it is on the way as well.

share|improve this answer
    
Another problem I ran into is triggering the href event and some javascript. The best way I found was to use: –  MrHayman Jul 20 '11 at 2:04
    
a href='#page1' onclick='return pager(1);' and return true from the pager function –  MrHayman Jul 20 '11 at 2:05
    
you should try this or davisjs like @raynos suggested –  Greg Guida Jul 20 '11 at 4:46
    
Or try history.js –  Raynos Jul 20 '11 at 6:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.