For this article, we will create a small hybrid Android jQuery Mobile based mobile application from the perspective of Windows OS. It will cover, step by step, everything you need to do to create a working jQuery Mobile project. I will try to put as much information as I can, especially how to solve errors you will find along the way. I have tried/tested everything myself; attached images will be the proof.
Last year I wrote a first version of this article, but a lot has changed since then. Google has replaced Eclipse with Android Studio (based on JetBrains’ IntelliJ IDEA), Cordova has de facto replaced PhoneGap (debatable of course), and Cordova development is much easier from a CLI perspective.

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


Table of Contents



Before we start this tutorial, make sure you have everything installed/configured to handle Android development (Apache Ant, Java SDK and Eclipse/Android Studio). Download the listed software:
  • 1. Install Apache Ant
  • 2. Install nodeJS
  • 3. Install jQuery, jQuery Mobile, && Cordova
  • 4. Install Java JDK
  • 5. Install Android SDK
  • 6. Create, Test, and Delete a demo jQuery Mobile application

1. Install Apache Ant

Go to the official Apache Ant site and download latest version, or any other if you don’t like to use latest versions. Download link:
Download Link
Create a new ANT directory (where ever you prefer) and unpack a downloaded archive. It should look something like this: D:\JavaScript\ANT\apache-ant-1.9.2
Use this location and create a new environment variable called ANT_HOME, also use this variable and add it to your environment PATH like this: %ANT_HOME%\bin.
jQuery Mobile Tutorial 1014
jQuery Mobile Tutorial 1015

2. Install nodeJS

Before we can start with jQuery Mobile, make sure you have Node.js installed. Depending on your Windows platform (32 bit or 64 bit) select Windows Installer (.msi) and download it. During the installation you must remember instalation location. In this case it’s:
c:\Program Files\nodejs\
Download Link
It should look like this:
jQuery Mobile Tutorial 1001
Now go to the node.js installation folder (one I mentioned before) and go even deeper until you reach a bin folder:
C:\Program Files\nodejs\node_modules\npm\bin\
Copy this location and add it to your environment PATH. Take a look at this tutorial if you don’t know how to do that, you will find an examples for Windows XP, Windows 2000 and Windows 7. It should look like this:
jQuery Mobile Tutorial 1002

3. Install jQuery Mobile && Cordova

First part is optional. Before we install jQuery Mobile and Cordova using node.js we could change a default installation folder. Original default folder is strangely placed in this hidden location: C:\Users{username}\AppData\Roaming\npm. We can change this destination folder manually, just go to this folder: C:\Users\{username}\ and create an empty file called: .npmrc (make sure you have administration privilegies over that folder). Edit it and add this line (don’t forget to save):
prefix = "C:\\{your location}"
Remember you should use double \\ instead of a \. In this article we are using this location: prefix = “D:\\JavaScript\\nodejs”
This is the end of the optional part. Now let’s install jQuery Mobile (this will also install jQuery so don’t worry) and Cordova. Open Windows command prompt and enter this:
npm install -g cordova jquery-mobile
This will initiate an installation process, give it some time to finish (if you receive an error try again few times, npm sometimes can’t find needed packages). It should look like this:
D:\JavaScript>npm install -g cordova jquery-mobile
D:\JavaScript\nodejs\cordova -> D:\JavaScript\nodejs\node_modules\cordova\bin\cordova
D:\JavaScript\nodejs\jquery-mobile -> D:\JavaScript\nodejs\node_modules\jquery-mobile
cordova@4.1.2 D:\JavaScript\nodejs\node_modules\cordova
├── underscore@1.7.0
├── q@1.0.1
├── nopt@3.0.1 (abbrev@1.0.5)
└── cordova-lib@4.1.2 (unorm@1.3.3, osenv@0.1.0, bplist-parser@0.0.6, properties-parser@0.2.3, mime@1.2.11, semver@2.0.1
1, dep-graph@1.1.0, shelljs@0.3.0, rc@0.5.2, npmconf@0.1.16, elementtree@0.1.5, xcode@0.6.7, glob@4.0.6, d8@0.4.4, tar@1
.0.2, request@2.47.0, plist@1.1.0, cordova-js@3.7.2, npm@1.3.4)

jquery-mobile@1.4.1 D:\JavaScript\nodejs\node_modules\jquery-mobile
└── jquery@2.1.1
I am adding text instead of an image to prevent unnecessary article loading time. Close this command prompt window, we will update our environment PATH soon.
Before we proceed any further we need to add Cordova bin directory to our environment PATH. Go to your node.js module directory (one we previously created, in this case it is: D:\JavaScript\nodejs\). Go even deeper until you reach this directory:
or in your case:
C:\{your location}\node_modules\cordova\bin\
Copy that location and add it to your environment PATH like, like this:
jQuery Mobile Tutorial 1003
Do the same thing for {your location} directory, go to your node.js module directory (one we previously created, in this case it is: D:\JavaScript\nodejs\).:
or in your case:
C:\{your location}\
Copy that location and add it to your environment PATH like, like this:
jQuery Mobile Tutorial 1010

4. Install Java JDK

Go to the official Oracle Java site and download latest Java JDK version, be careful not to download Java JRE instead. You will also need to create an official Oracle account. Be careful to install a correct 32bit or 64 bit version (this tutorial will show you how to find this information). Download link:
Java JDK
Install it where ever you want, just remember its location. For example, it should look like this: C:\Program Files\Java\jdk1.8.0_25\
Create a new environment variable (into System variables) called JAVA_HOME and add a location to your JAVA installation folder. Then add it to the environment PATH, looking like this: C:\Program Files\Java\jdk1.8.0_25\bin:
jQuery Mobile Tutorial 1004
jQuery Mobile Tutorial 1005

5. Install Android SDK

Go to the official Android SDK site:
Android SDK
You can choose “Download Android Studio” if you wish a full package or you can scroll a bit until you see: Other Download Options -> SDK Tools Only. Here you can download SDK only, just select Windows installer package and initiate download/installation. In this case will we download full Android Studio. Start SDK Android Studio installation.
At this point, just click Next until installation ends if you wish you can change installation folder.
Go to Android Studio installation folder, like this one: C:\Program Files\Android\Android Studio\bin\ and create a desktop shortcut (if you are using 32bit Windows use studio.exe or studio64.exe in case of 64bit Windows). Do this step only if installation didn’t do that automatically.
Open Android Studio (this part will fail if you don’t have installed JAVA SDK also it will take some time for it to open for the first time, ). Click Create New Project, and click Next several times. When Android Studio opens, go to toolbar and click Tools -> Android -> SDK Manager. When you open the SDK Manager for the first time, several packages are selected by default. Leave these selected, but be sure you have everything you need to get started by following these steps (don’t select Android 3.X or anything lower than 2.3.3 because Cordova don’t support them).
jQuery Mobile Tutorial 1006
Once you’ve selected all the desired packages, continue to install, click Install X packages. In the next window, double-click each package name on the left to accept the license agreement for each. Click Install. The download progress is shown at the bottom of the SDK Manager window. Do not exit the SDK Manager or it will cancel the download. You will probably need to do this 3-4x times (some sections have dependencies and installer is not smart enough to install then in the right order).
jQuery Mobile Tutorial 1007
This will take a lot of time so make yourself a coffee while you wait.
jQuery Mobile Tutorial 1006
When everything is done, your Android SDK should be installed somewhere like this:
in your case, it will be:
Create new environment variable called ANDROID_HOME and add previously mentioned link. Now add two additional environment PATH locations %ANDROID_HOME%\platform-tools; and %ANDROID_HOME%\tools;. Everything should look like this:
jQuery Mobile Tutorial 1011
jQuery Mobile Tutorial 1012
jQuery Mobile Tutorial 1013
Continue Reading

  • HI Dragan, thank you for your tutorial.
    I’m trying to reproduce it on Windows 7 x64 using cordova 4.1.2 and an android emulator.
    I followed all steps and things seem to work till I try to emulate the app on android.
    When I run “cordova emulate android” I briefly see a terminal window appearing&disappearing while the console shows the text:

    Total time: 3 seconds
    Built the following apk(s):
    WARNING : no emulator specified, defaulting to testavd
    Waiting for emulator…

    any idea of what I could be doing wrong?

    • Hi Claudio, try these few things:

      1. Go to the command prompt, type android, this should open Android SDK Manager. Chech that you have SDK for Android 4.4W.2 (API 20), emulator won’t work without it.+
      2. Delete your current emulator and create new one or select some preselected device.
      3. Manually start emulator, like this: emulator.exe -avd *avdname* where avdname is your emulator name.
      4. Still Nothing? Post me output of step 3.

      • Thanks Dragan!
        This worked.

      • Stephen Wanhella

        Also >cordova emulate android –target=your_avd_name

  • Duco

    Thanks for your tutorial, it’s very nice!

  • joey

    Hi Dragan,
    thanks you for your nice and helpful tutorial.
    How do I create an apk?
    Thanks in advance.

    • APK file is automatically created in this directory structure:


      myMobileApp is created project folder

      • joey

        Hi Dragan,
        thank you for your reply.
        Unfortunately I can’t find the apk, here is my file:

        Would you do me a favor and help me with this problem?
        Thanks in advance.

        • File is in front of you: CordovaApp-debug.apk

          Of course, this is not a production (release) apk file. If you want to create a release version look at this tutorial.

          • joey

            Hi Dragan,
            it works fine! Thank you very much.

  • farhan khan

    i have made an list view application . in which i have given http address of various faculty in our college website
    when i execute it on my phone the appearance is same as that in web browser . but when i send the apk file to other phones the appearances changes to basic web page display.
    android application was made with ur reference blogs. can u please help me in making the app consistent to run same in every smartphone

    • Are you pulling jQuery Mobile files from your mobile phone or from remote server?

  • Ike

    I see you have something for windows and MacOS but nothing for Ubuntu

  • Ben

    I greatly appreciate your work. I successfully implemented your tutorial on my old jQuery mobile app files that I designed two years ago, but I couldn’t import it correctly to Android Studio to do some extra work (drawable…) and deploy. I keep getting an error message that “The project ‘myapp’ is not a Gradle-based project.

    Thanks in advance for your help.

    • If I understood it correctly you’re importing an old jQM project into Android studio.

      If you’re importing an existing old project with no gradle configuration, Android Studio will use the old build system and this may cause your problem.

      Follow this tutorial if you want to import old project:

  • Charlie

    Thanks for the tutorial — it really helped me to get clarity on a couple of important aspects of Cordova development.

    I’m having a problem with with the app, though, and I hope you can help me with it. The code works great in my browser and my emulator. But when I try to launch it on my Android phone I’m only getting a white screen with the following text:

    Movie List
    Copyright 2015
    Movie Info

    That’s it. Any advice?

    • Maybe your code can’t access remote jQuery/jQuery Mobile files. Download them and run them directly from your app.

      • Thanks for the response. You’re right — network problems. Once I connected the device to wifi, everything worked.

        Thanks again for the tutorial — very educational!

  • Sansu

    I cann’t get the images showing. Any idea hot to or where to troubleshoot? Tks

    • The problem is in image provider who constantly changes image locations. Go to moviedb web site, find any movie and look at a current image location. Replace the current one with newer one.

  • Thanks, though I will wait until jQuery Mobile 1.5. While old events are indeed deprecated there’s a good chance they’ll remain in the next version (according to some unofficial news).

  • Amit Sinha

    Thankyou very much for much adorable post.

    Please let me know one thing. How can i run directly to my smart phone. as i running command “cordova run android”. its throwing error, target not defined and it open in emulator.

    • It depends on your smartphone, every type has s different approach. For exameple for Samsung smartphones you need to download either Keys software or Samsung Android USB drives.

  • Amit Sinha

    Showing connection to the server was unsuccessfull error.

    Please help, where i did wrong.

  • Amit Sinha


    Now i’m able to run apk on my smart phone, but getting ajax navigation issue, Here i paste the whole message which i’m getting at the bottom of screen.

    Note: Navigation may not work if viewed locally

    The Ajax-based navigation used throughout the jQuery Mobile docs may need to be viewed on a web server to work in certain browsers. If you see an error message when you click a link, please try a different browser.

    • My advice, don’t use jQuery Mobile. It slow, old, buggy, and good as dead. Think about switching to OnsenUI (version 2.0) or Ionic Framework.

      • Amit Sinha

        could you please share any tutorial link from where i can learn to develop good apps.
        Actually i need to develop a location finder using google map.

  • Maria Cristovao

    Thank you very much. An excellent tutorial.

  • Durga Prasad

    I am getting this error with cordova 6.2.0.Can anyone please help

    TypeError: undefined is not an object (evaluating ‘a.event.props.concat’)
    (anonymous function) —
    (anonymous function) —
    (anonymous function) —
    global code —