jQuery and Mobile Web Development

We use jQuery in most of our web applications for form validation, showing/hiding content, and the like. With the release of our new mobile site, we were faced with a set of challenges specific to mobile applications, and we used jQuery to address a number of them.

Heavy Content
When developing for the the limited bandwidth mobile devices are restricted to, an emphasis on lean page requests is critical. Our solution was to use jQuery’s load() function to pull in non-critical, heavier components once the general layout of the page had been drawn. The result is a quickly-loading front page with multiple AHAH requests initiated after the browser has already drawn the template. Here’s a quick, slightly modified example pulled straight from the homepage:

$(document).ready(function(){
   $("div.slideshow").load("slideshow.cfm",function(){
      //AHAH callback goes here...
   });

   //more calls of the same type follow
});

In this case, a div with a class of “slideshow” gets loaded with the content from a ColdFusion page that has the images and captions. This wrapping div is part of the initial page content and will remain in place no matter what we try to load inside it.

In general, you want the initial content of the wrapping element to be some sort of indication that content is loading. A simple .gif animation or text, such as “Loading…” does the trick. This initial content will be replaced by whatever gets loaded into its wrapper, so no need to try and empty or hide the contents of the wrapper before you call load().

Calendar
Our calendar page has a typical month view grid with space underneath for event details on the selected day. The month grid as well as the selected day’s events are drawn based on month, day, and year url parameters, so a changed month or day would normally require a page refresh. On a mobile device with limited bandwidth, looking at the events on a different day or switching to a new month would get increasingly frustrating and may end up with the user eventually giving up. Using the load() function again, however, we can allow the wrapping template to remain in tact while only changing the content that needs to be changed. The user will always have something to look at, and requests will be much faster because there’s less content to load each time. Here’s some code that demonstrates what I’m talking about:

$(document).ready(function(){ //fire once the page has finished drawing
   //load the calendar grid (replacing a .gif spinner)
   $("#calGrid").load("month.cfm");

   //load the day wrapper with event details for today
   var today = new Date();
   $("#dayDisplay").load("day.cfm?d=" + (today.getDate()) + "&m=" + (today.getMonth() + 1) + "&y=" + today.getFullYear());

   //when a user changes months, this loads a new calendar grid without changing anything else on the page except for clearing day event details.
   //NOTE: we use the live() function to make sure the handler still works for the new content
   $("a.mchange").live("click",function(){
      $("#calGrid").load($(this).attr("href"));
      $("#dayDisplay").empty();
      return false;
   });

   //again we use the live() function to make sure the handler still works for fresh content
   $("#viewtoday").live("click",function(){
      $("#calGrid").load($(this).attr("href"));
      $("#dayDisplay").load("day.cfm?d=" + (today.getDate()) + "&m=" + (today.getMonth() + 1) + "&y=" + today.getFullYear());
      return false;
   });

   //here we pull in a day's events into the day even wrapper once a date on the calendar grid has been selected
   $("table.grid a.daylink").live("click",function(){
      //AHAH call
      $("#dayDisplay").load("day.cfm" + $(this).attr("href"));

      //indicate which day is currently being viewed
      $(".calendar .grid td:not(this)").removeClass("currentDay");
      $(this).parents("td:first").addClass("currentDay");

      //scroll down to take the user straight to the event details
      scrollTo(0,355);

      return false;
   });

});

Tagged as: coldfusion, jQuery, mobile