I learned the hard way JQuery Mobile works best when you stop fighting its static nature and allow it to provide a dynamic feel as much as possible. For the full version of Jokels, whenever you click the “random joke” button, a new joke’s HTML is dynamic loaded and inserted into the main page to replace the old one, so my first attempt at the mobile site did the same:
Here we use JQuery Mobile’s showPageLoadingMsg() and hidePageLoadingMsg() along with JQuery’s fadeIn and FadeOut to hide the page while a new Joke’s DOM is pulled in and the JQuery Mobile effects are applied manually. Not only is this more likely to break than JQuery Mobile’s navigation but it also means we can’t use certain JQuery Mobile effects which don’t support manual creation, like button groups.
The second pass at this is was much simpler and robust. Instead of trying to do our own AJAX loading we let JQuery Mobile do the work for us by dynamically creating a link to a random joke each time the mobile page is loaded:
We don’t include the random joke link in the page creation since JQuery Mobile caches pages already visited: this means including the static link in the page HTML would create a cycle if we managed to loop around to a previously visited joke in a given user’s session.
Page caching brings up another big gotcha with JQuery Mobile: old page DOMs stick around after navigation. This means that when you’re trying to use a JQuery selector to get a given element that may be on past pages, you need to make sure to select the current “page”‘s element instead of a cached one. We do this by looking for the class “ui-page-active.” This is how we set the upvote button to a pressed state and update the vote score, for example:
The final big issue with JQuery Mobile is that it doesn’t support query params. Ostensibly this is to support page caching: the theory being that “pageA.html?a=1” wouldn’t differ dramatically from “pageA.html?a=2”, so JQuery Mobile strips out query params and treats both links as identical. Obviously, this isn’t necessary true. For example, our leaderboards use query parameters to change whether Users or Jokes are being shown, by what criteria they’re sorted and for what time frame they’re being considered. This means that the same page with different query params can be dramatically different, so we need some way to support query parameters. One way to get around this is to add the ‘data-ajax=”false”‘ attribute to any links with query parameters, but this loses the beautiful AJAX navigation model. For the leaderboards we found a really simple solution: embed query parameters in the path using Rails’s dynamic segments routing. So for our leaderboard links, we just use this snippet in our routes.rb:
Then, in our Leaderboard_helper class we have this small function to get a link to a given leaderboard:
This allows us to still have static leaderboard pages using our query parameters, but use distinct paths so Jquery Mobile treats them as independent pages and loads them using its Ajax model.
JQuery Mobile has a few minor hang-ups. But combined with mobile-fu, it allowed us to get a functional mobile version of Jokels.com much quicker than anyone with our mobile experience has the right to do so.