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:
- Drupal Core compatible with jQuery 1.6.x and jQuery UI 1.8.x
- jQuery Mobile module to integrate the library
- jQuery Mobile compatible theme elements
Snowball Drupal Core
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
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.