jQuery Mobile with Drupal 7

A few months back I did a talk at DrupalCamp Montreal on using jQuery Mobile with Drupal. The message passed along during that talk was essentially, jQuery Mobile and stock Drupal 7 don’t work together. It boils down to the version of jQuery that Drupal 7 ships with (1.4.4) is too old and doesn’t work with the latest version of jQuery Mobile (which required jQuery 1.6.x or higher).

But that didn’t stop our enterprising developers from finding a way to get jQuery Mobile and Drupal to play well together. We decided to tackle the three aspects holding Drupal and jQuery Mobile back from working together:

  1. Drupal Core compatible with jQuery 1.6.x and jQuery UI 1.8.x
  2. jQuery Mobile module to integrate the library
  3. jQuery Mobile compatible theme elements

Snowball Drupal Core

We initially hoped that using a module such as jQuery Update would allow the newest version of jQuery to work. But due to the way the jQuery API changed between 1.5 and 1.6 it would break compatibility with not only core javascript files, but a lot of contrib modules as well. So we had to bite the bullet and do the unthinkable; hack core.

Ok hack is a pretty strong word. I would say we “patched” core instead. It was fairly straight forward to tackle. We patched core with the newest version of jQuery/jQuery UI and adjusted any incompatible javascript files to match. Hence, we created our Drupal distribution called Snowball Thanks to a great patch found on this issue queue to help keep Drupal 8 up to speed on the latest versions of jQuery, we were able to create a repository which merges changes to Drupal 7 with the updates required by this patch. As new versions of Drupal 7 are released, we’ll in turn create new releases of Drupal with the patched jQuery code.

The changes to core javascript as pretty simple to make. And we also maintain patches for popular contrib modules such as Views, CTools, Panels and Webform which have jQuery based javascript components that required updating to work with jQuery 1.6. It can be a lot to manage at times, but with a proper patch system in place, keep up to date isn’t all that difficult. Most of the changes involve looking at how the .attr() function is being used and seeing if it should be replaced by .prop() instead (Google around to see the distinction).

jQuery Mobile module

There are a few sandbox projects and even a few full projects on Drupal.org for jQuery mobile. Unfortunately, due to their incompatibility with core and any version of jQuery mobile beyond 1.0alpha4 they didn’t suit our needs to build great mobile web applications. We also couldn’t submit updates/patches to the module to allow newer versions of the library to work since they wouldn’t work with core either. So we created our own module to work with Snowball on GitHub as well called jquerymobile. The code is based upon the work started at http://drupal.org/project/jquerymobile but completed and extended to match the requirements of the jQuery Mobile API changes in the later versions. At the time of writing, the module is fully compatible with jQuery Mobile 1.0rc2 and we’ll keep the module up to date as needed.

jQuery Mobile theme

The last, and probably most important part, is getting Drupal to output jQuery Mobile compatible markup. If you’ve done any reading on the subject, you’ll know that jQuery Mobile is very markup driven. Using the data-* attributes in the HTML5 specification to trigger the javascript library. Hence, the templates used by Drupal must match the required markup. Some components of the theme are found inside the jQuery mobile module but most theme overrides are in our jP9m base theme (jQuery / Panels / 960 / Mobile). The theme incorporates all the jQuery Mobile markup for form elements, tables, pages and the like. It also has some extra features like Panels plugins to build pages in Panels which work with jQuery Mobile and some initial 960gs for jQuery Mobile code as well. This is mainly to allow shared class names and layouts with the Omega theme but that’s beyond the scope of this blog post.

In any case, it generates the markup required for jQuery Mobile to work. We haven’t released the code for this quite yet (not ready for public consumption) but you can see a preview of it at http://m.demo.coldfrontlabs.ca. Once the theme is in a more complete and shareable state, we’ll be posting it on GitHub as well.

jQuery Mobile Plugins

We’ve also started creating jQuery Mobile plugin modules for Drupal which incorporate fantastic plugins for the library. Namely, Datebox is our first foray into this realm. As part of our goal to support all the core form elements along with new ones made available by the Elements module this plugin creates great date and time widgets to handle a lot of different input situations (ex: birth days, credit card expiry dates, deadlines).

All in all, we’re hoping to foster a great community of developers around Drupal and jQuery Mobile. We believe this is an excellent addition to the power of Drupal with jQuery and jQuery UI. Hopefully you’ll give Snowball and shot and submit feedback, bugs and patches for all of the modules we’ve mentioned.

Until next time.