Drupal Planet jQuery Mobile Phonegap

Building a jQuery Mobile HTML5 App with PhoneGap for Drupal 7, Part 2

In this post, we’re going to add functionality to take a picture to our jQuery Mobile app using the PhoneGap Media Capture API. We’ll add a button with jQuery Mobile that brings up the mobile phone’s camera.

With jQuery Mobile, to make buttons, we can use the <a href> tag with a data-role=”button” attribute. If you’re submitting a form, use the <button> tag instead – jQuery Mobile will format both of those the same way.  We’ll go ahead and add a button that doesn’t do anything yet – replace the contents of the <div data-role=”content”> tag with this:

<div data-role="content">             
  Welcome to the jQuery Mobile Demo App for Drupal!             
  <a id="takePhotoButton" data-role="button">Take Photo</a>         

Run it in the iPhone Simulator, and it looks pretty good for us not having to do too much!

We’ll take advantage of jQuery’s bind method and PhoneGap’s deviceready event for our button functionality.

One gotcha you will probably run into is that you’re used to binding to the click event with jQuery on desktop browsers. With jQuery Mobile, we need to bind to the tap event for our button instead.

We’re using the PhoneGap Media Capture API with the camera – only one line of Javascript needed to bring up the camera on the phone.

navigator.device.capture.captureImage(captureSuccess, captureError, {limit: 1});

You’ll need to provide functions to handle success and errors, along with PhoneGap’s CaptureImageOptions. In our case, we’re limiting the number of photos the user can take to one at a time.

Here’s the JavaScript we need to add to our index.html

        function captureSuccess(mediaFiles) {
            navigator.notification.alert('Success taking picture:');
        function captureError(mediaFiles) {
            navigator.notification.alert('Error taking picture: ' + error.code);
        $(document).bind("deviceready",function () {
            $("#takePhotoButton").bind("tap", function() {
                navigator.device.capture.captureImage(captureSuccess, captureError, {limit: 1});

You won’t be able to see this run in the iPhone Simulator, because the iPhone Simulator doesn’t have a camera – instead, you’ll need to run it on an actual iPhone (or iPod Touch or iPad with a camera).

In my next post, we’ll cover how to upload images to Drupal 7 using Services 3.

9 replies on “Building a jQuery Mobile HTML5 App with PhoneGap for Drupal 7, Part 2”

Dear Jeff,
This is an amazing tutorial and very timely, definitely need these tutorials since they mention about integrating drupal as well. I was trying to connect the dots on Jquerymobile and Phonegap but you have taken it as far to drupal as well which is the final destination for my current app. A couple of questions:

1. I am not sure if I saw part 3 , So I am eagerly looking forward to it.
2. We currently have Drupal 6 , so would it be possible to follow the same steps for 6 as well.

Thank you.

Great tutorial. Quick question- Where would the script that you add to bind to tap event go in index.html? would it be in head after including phonegap and jquery mobile?

Yes – you want to load the Javascript source files, then add your onDeviceReady bindings.

Quick question

My site isn’t working, but when I take out this line: It works and when I put this line back, the button don’t work ( on my phone off course 😉 )

Any ideas? It looks like a conflict between jquerymobile and jquey script


Which line? Looks like the WordPress super comment spam protector took out your script tag from your comment 🙂


It’s not to do anything about your explanation. I have also a phonegap and querymobile app and I want to add a notification alert on a link. Now I added this line: onclick=”showAlert(); but then it doesn’t work.

When I delete a line of code like this one jquery.js. Then it works :S haha.
Any idea ?

Hmm, there might be a syntax error. Open up your www/index.html in your web browser and then open the web browser’s error console and see if there are some syntax errors.

You can also use Weinre for debugging PhoneGap applications, but that’s pretty clunky.

Leave a Reply

Your email address will not be published. Required fields are marked *