Search code examples
javajqueryplayframeworkurl-routingfragment-identifier

Simple example of JQuery Address to manage application state

I'm using the jQuery Address library to re-write my URL depending on what the user is doing in the page. The intention is to allow users to bookmark pages and come back later. The page never refreshes as all server interaction is done via ajax.

jQuery Address is writing URLs like this:

http://localhost:9000/#/u/scott_tiger

I need a to set up a route in Play to be able to route that request through to the appropriate controller. So I set this up:

GET     /#/u/{username}                Controller.showUser

This doesn't work though, the route definition gets ignored. I've tried loads of things such as trying to escape the "#" and replacing it with a variable that I've populated with Character.toString(35). None of this works.

Does anyone know how I can either define the route properly or get jQuery Address not to write the "#".

EDIT: The "#" doesn't get sent to the server does it. Doh! OK, question is revised.

Solution

  • No. The # and the part of the URL after that is not sent to the server. So your play app on the server will never see such URLs.

    HTML5 solution

    You need to handle these URLs on the client side using JavaScript. In modern browsers with good HTML5 support, you can modify the address without reloading the page. See Manipulating the browser history on how to do it for these browsers. And see When can I use... for browser support.

    #-URLs

    On Internet Explorer and older versions of other browsers you need to use # URLs and use JavaScript to load the state (e.g. get the user page /u/scott_tiger in your example). See How to run a JavaScript function when the user is visiting an hash link (#something) using JQuery? for how to do this in JavaScript. Also if a user bookmarks a page with a #-URL you need to reload the state.

    See also: What's the shebang/hashbang (#!) in Facebook and new Twitter URLs for?

    JavaScript libraries

    You may use JavaScript libraries to handle this for you history.js is an example. Also bigger frameworks like Backbone.js handle this.

    Does anyone know how I can get jQuery Address not to write the "#".

    If you don't write the #-part of the URL, the state can not be linked. So you can not get back to e.g. Scott Tigers profile page if you bookmark the page, because the URL is only http://localhost:9000/ and you will arrive on the front page, while the user though he would arrive on the profile page.