Building a Mobile App with Phonegap and jQuery Mobile 1.4.5

Written by on August 10, 2015

Building a Mobile App with Phonegap and jQuery Mobile 1.4.5

Update: This article is outdated. You can find a 2019 year version here.

For those of you who don’t know this is a rather complex topic. For starters, you’re here to learn how to combine jQuery Mobile successfully with PhoneGap, let me first tell you something about them. jQuery mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphone, tablet, and desktop platforms. Everything mentioned here helped it in its rise to popularity.

On the other hand, PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you like. It serves as a native wrapper for your/our mobile applications.

PhoneGap is a distribution of Apache Cordova. You can think of Apache Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers Chrome or Safari. That’s why, later in this article, you will need to download Cordova archive but I will still talk about it like it is a PhoneGap. If you want to understand this better read this excellent PhoneGap developers article.

This article is intended to show you how to combine jQuery Mobile successfully, steer around some implementation obstacles and make it as fast as humanly possible. You have probably heard about the bad performance of PhoneGap applications, because of that, many developers stopped developing any jQuery Mobile PhoneGap applications. Is this a bad combination? The answer is yes and no. jQuery Mobile was never intended to be used in such a way, nor was PhoneGap expected to work with such a complex framework. Thankfully situation is not that bad; this combination can work successfully as long as you ready to learn proper design patterns.

For the test purpose, we will create a small hybrid Android jQuery Mobile application from the perspective of Windows OS and Eclipse IDE. If readers show enough interest I will also create a iOS / MacOS combination (EDIT: After several requests I have created article related to MacOS, link can be found here).

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to Thanks and have a nice day!


Download the listed software:

  • Install Apache Ant
  • Install Java SDK
  • Install Android Studio and SDK Tools
  • Install nodeJS
  • Install PhoneGap/Cordova & jQuery Mobile

Install Apache Ant

Go to the official Apache Ant site and download the latest version, or any other if you don’t like to use newer versions. Current last version 1.9.6) was released at July 2, 2015.

Download link

Create a new ANT directory (where ever you prefer) and unpack a downloaded archive. It should look something like this: C:\Android\ANT\

Use this location and create a new environment variable called ANT_HOME, also use this variable and add it to your PATH like this: %ANT_HOME%\bin. 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:

[frame align=”center”]ANT HOME[/frame]
[frame align=”center”]ANT PATH[/frame]

Install Java SDK

Go to the official Oracle Java site and download latest Java SDK 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

Install it where ever you want, just remember its location. For example it should look like this: C:\Program Files\Java\jdk1.8.0_51\

Now, just like with an ANT, create a new environment variable called JAVA_HOME and add a location to your JAVA installation folder. Then add it to the PATH. It should look like this:

[frame align=”center”]JAVA HOME[/frame]
[frame align=”center”]JAVA PATH[/frame]

Install Android Studio and SDK Tools

Go to the official Android Studio site, click “DOWNLOAD ANDROID STUDIO FOR WINDOWS” and download the latest version.

[frame align=”center”]ANDROID STUDIO DOWNLOAD[/frame]

Download link

It’s a rather large installation so be patient (around 1GB). When you initiate the installation just remember the location of Android SDK directory:

[frame align=”center”]ANDROID SDK HOME[/frame]

Now create a new environment variable called ANDROID_HOME and add previously mentioned link. Also add two additional environment PATH locations %ANDROID_HOME%\platform-tools; and %ANDROID_HOME%\tools;. Everything should look like this:

[frame align=”center”]ANDROID SDK HOME[/frame]
[frame align=”center”]ANDROID SDK HOME[/frame]
[frame align=”center”]ANDROID SDK HOME[/frame]

Open Android Studio, it will automatically update necessary files, give it a few minutes. Finally, you will be presented with this window:

[frame align=”center”]ANDROID SDK HOME[/frame]

Click on Configure -> SDK Manager, it will open this window:

[frame align=”center”]ANDROID SDK HOME[/frame]

Select appropriate Android versions and click Install XX packages (where XX represents the number of selected packages). In the next window select Accept License and once again click Install.

This will take a lot of time so make yourself a coffee while you wait.

jQuery Mobile Tutorial 1006

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. We will use:

c:\Program Files\nodejs\

Download Link

It should look like this:

jQuery Mobile Tutorial 1001

Go to the node.js installation folder and add it to environment PATH:

[frame align=”center”]jQuery Mobile Tutorial 1002[/frame]

Now, 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. It should look like this:

[frame align=”center”]jQuery Mobile Tutorial 1002[/frame]

Install PhoneGap/Cordova & jQuery Mobile

As Cordova is much more accessible than PhoneGap we will use it instead.

Before we install anything using node.js we should change a default installation folder. Default installation 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 = “C:\\Android\\npm”
Open the command prompt and install jQuery Mobile (this will also install jQuery so don’t worry) and Cordova:

npm install -g cordova jquery-mobile

This will initiate the installation process, give it some time to finish (if you receive an error try again few times, npm sometimes can’t find necessary packages).

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 (the one we previously created, in this case, it is: C:\Android\npm\). 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:

[frame align=”center”]jQuery Mobile Tutorial 1003[/frame]

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:

[frame align=”center”]jQuery Mobile Tutorial 1003[/frame]

Creating Cordova + jQuery Mobile project

Let’s create a project directory, do it anywhere you want.

Open the command prompt and go to the newly created project directory, execute this:

cordova create testApp

Now we have a working Cordova project. Open it, go to the www directory any empty it.

Continue Reading


53 thoughts on “Building a Mobile App with Phonegap and jQuery Mobile 1.4.5”

  1. Hey Gajotres,

    nice article. SInce the last week, i’ve tried to integrate iScollView into my PhoneGap+JQM Projekt for Android.
    What i noticed is, that with iScrollView scrolling get’s choppy with large content. Have you experienced similar effects?

    • Yes I have, you can even see it in my app example. It just don’t feels native enough, that’s why I wrote “unfortunately scrolling still don’t feel fluid”. Also to be fair I wouldn’t put this on jQuery Mobile, at least not everything.

  2. Nice work, but i’ve been traying to launch into the virtual android and rise an error due that i put the index inside isset, but i realized that the isset directory has a www folder and inside www there are: css, img, js, res, spec, cordova,js, index,html and etc, if i replace the index,html for my index,html an issue appears, so what is happens? tnx.

  3. Resolved: Application Error Is a directory (file:///#android_asset/www/index.html)
    what did I was, downloaded the file and had it placed locally inside my www folder. That fixed my problem.
    I was using a resource that requires internet access as Jquery, etc.

    Tnx again.

  4. Yes, thanks for a great article!
    I would also love an iOS/MacOS combination so I’m showing my interest.

  5. Hi there,

    when I create project, I got error message says :
    “Error: ENOENT”, no such file or directory ‘c:\Android\Project…..’ –> just like you saying.

    anything wrong..?

  6. I followed this tutorial step by step, the only change is that i’m using the latest cordova 3.2
    However, i keep having this Error on the “create” application step
    [Error: An error occurred while listing Android targets]

    Please help!

  7. Thanks for sharing. I wanted to let you know your webpage doesn’t display properly on Linux Mint using Firefox or Chrome. The whole page is shifted to the right, cutting off the ends of the content.

  8. Very clear and concise, thank you.
    I have followed this tutorial to the letter and can not create a sample project. I wonder, is this a compatibility issue?

    I have installed all the soft in the last 2 days. It is eclipse, android sdk, ant, java sdk and done all the path system variables

    Maybe there is some workaround? The answers to be found on the internet seem to address the matters I have sorted out, like run cmd as an administrator, set the paths, instal everything, no spaces in folder names…

    Please help.

    D:\DEV\ANDROID\cordova-3.4.0\cordova-android\bin>create d:\dev\Android\Project\PhoneGap_example com.test.example “grai5”
    throw e;
    Error: An error occurred while listing Android targets
    at D:\DEV\ANDROID\cordova-3.4.0\cordova-android\bin\lib\check_reqs.js:87:29
    at _rejected (D:\DEV\ANDROID\cordova-3.4.0\cordova-android\bin\node_modules\q\q.js:808:24)
    at D:\DEV\ANDROID\cordova-3.4.0\cordova-android\bin\node_modules\q\q.js:834:30
    at Promise.when (D:\DEV\ANDROID\cordova-3.4.0\cordova-android\bin\node_modules\q\q.js:1079:31)
    at Promise.promise.promiseDispatch (D:\DEV\ANDROID\cordova-3.4.0\cordova-android\bin\node_modules\q\q.js:752:41)
    at D:\DEV\ANDROID\cordova-3.4.0\cordova-android\bin\node_modules\q\q.js:574:44
    at flush (D:\DEV\ANDROID\cordova-3.4.0\cordova-android\bin\node_modules\q\q.js:108:17)
    at process._tickCallback (node.js:415:13)

  9. I had googled extensively before asking here and gone through also the site you recommend. Here is a summary of advice offered there:

    install apache ant.
    create two system variables ANDROID_HOME and ANT_HOME
    install the latest Tools and SDK
    restart cmd and try again

    It appears this one advice to restart cmd could have made some difference, because now the response is different, but now there is a shell.js internal error.

    D:\DEV\ANDROID\cordova-3.4.0\cordova-android\bin>create d:\dev\Android\Project\PhoneGap_example com.test.example “grai8”
    Creating Cordova project for the Android platform:
    Path: ..\..\..\Project\PhoneGap_example
    Package: com.test.example
    Name: grai8
    Android target: android-19
    Copying template files…
    shell.js: internal error
    Error: ENOENT, no such file or directory ‘D:\DEV\ANDROID\Project\PhoneGap_example\assets’
    at Object.fs.mkdirSync (fs.js:642:18)
    at D:\DEV\ANDROID\cordova-3.4.0\cordova-android\bin\node_modules\shelljs\src\cp.js:173:14
    at Array.forEach (native)
    at Object._cp (D:\DEV\ANDROID\cordova-3.4.0\cordova-android\bin\node_modules\shelljs\src\cp.js:156:11)
    at Object.cp (D:\DEV\ANDROID\cordova-3.4.0\cordova-android\bin\node_modules\shelljs\src\common.js:172:23)
    at D:\DEV\ANDROID\cordova-3.4.0\cordova-android\bin\lib\create.js:166:19
    at setShellFatal (D:\DEV\ANDROID\cordova-3.4.0\cordova-android\bin\lib\create.js:45:5)
    at D:\DEV\ANDROID\cordova-3.4.0\cordova-android\bin\lib\create.js:164:9
    at _fulfilled (D:\DEV\ANDROID\cordova-3.4.0\cordova-android\bin\node_modules\q\q.js:798:54)
    at self.promiseDispatch.done (D:\DEV\ANDROID\cordova-3.4.0\cordova-android\bin\node_modules\q\q.js:827:30)

  10. Nice tutorial but may I suggest using NetBeans 8.0? It has an awesome Cordova app support that simplifies a lot a big part of this tutorial! You can install it on a Mac and launch both Android or iOS simulators, upload to devices or debug directly in any system browser. Same should happen also on windows or linux, except the iOS support that requires a Mac+XCode build tools obviously!
    When creating a project, NB8 will also download jQuery Mobile or whatever js library you like directly in your project by selecting it from an updated cdn list. Really, give it a try and forget the eclipse headache 😉

  11. 4/4/14 Hi Gajotres.

    Thank you for the very clear post (everything worked great) and I am “phonegapping” LOL…

    Just an FYI. yesterday I found out and installed the “genymotion” Android emulator (free one).

    It is much (much) faster than the stock Android Emulator and makes the Phonegap Eclipse Genymotion” Emu” a much more natural workflow.

    There are paid for features with Genymotion that I know nothing about because there are fees involved (which is fine but I do not require these, yet). If needed, Google Play apps ‘n other google apps are not included in the stack and need to be added, if necessary. This tells you how to do it and it worked for me without incident nor error if followed exactly. (

    No association with these folks other than being a new fan of their efforts and the much improved speed of developmetn achieved.

    Cheers //GregH from Huntington Beach CA

  12. $.mobile.changePage( “#headline”, { transition: “slide”, changeHash: false });

    does it work with query mobile 1.4 ???

  13. Hi Dragan,
    thanks for this beautiful tutorial. I’m really new in phonegap and I noticed that in your app, when you click on the Android back button, also if you are visualizing the details of a movie, it exits from the app. This is intuitively not correct but it should allow to come back to the previous “activity”. Is there a way to do this? this happens because you are using only one html file and div to simulate other pages?

    • This is only a demo application, made to show you how jQuery Mobile works with Phonegap. If you have any non related question I would advise you to ask them over at StackOverflow, mainly jQuery Mobile group. Just ask for Omar.

  14. Hi Dragan,
    I have another problem. It’s a bit difficult to explain….when I want to see the last elements of the list it is impossible to select these elements because it seems like the height of the content is too small. If you try the app on a device you can understand.
    How can I solve this problem?

  15. Only Because of you Today I know how to make android and ios app thank you for teaching me such an awesome thing 🙂

  16. Thank you for the great example. Could you please describe the best way to bind to phonegap’s events? I need to capture the backbutton event triggered by pressing Android’s native back button but I seem to keep running into race conditions with jqury mobile firing off before I try to bind to the event.

      • I see that some of the post was stripped out. I should have figured there would be some sanitizing.
        I have update the post. Please delete the previous post if you can. The edited example is below.

        I have to say right off the bat thank you.
        As I was writing my response to you I realized what I was doing wrong.

        I will post an example here of my solution.

        ::HTML JS inclusions::
        Jquery (2.1.1)
        App (my script)

        phonegap (3.6.3)
        jquery mobile (1.4.5)

        ::app js::

        var app = {

        deviceready: $.Deferred(),
        jqmReady: $.Deferred(),
        jqmPageShow: $.Deferred(),
        initialize: function () {
        document.addEventListener(‘deviceready’, app.onDeviceReady, false);
        $(document).one(‘mobileinit’, function() {
        — execute jquery mobile settings —
        $.when(app.deviceready, app.jqmReady, app.jqmPageShow).then(function() {
        — hide splash screen —
        — bind to backbutton event —
        bindPageShow: function() {
        $(document).one(“pageshow”, function() {

        Thank you for your help. I would still like any feedback if you believe there is a better way to do what I am doing.

        There may be a typo in this code as I didn’t actually copy the exact code because it is rather long but this should give you the idea of how I solved my problem.

  17. Hi. Thank you for this clear tutorial. I have only one thing I’m not understanding: when I connect my device and run the app, the movies’ list is empty… I get the header ‘Movie list on a light grey background, the footer at the bottom but the list is a white, empty land… Any idea?

  18. hii,
    I’m new jquery mobile with phonegap. please give me any idea how can i build a jquery mobile cordova project and how can i build the apk

  19. Hi and thanks for the article its very helpful at this stage in my learning of mobile app development.
    I have gone all the way to the cordova and jquery install using the npm install -g cordova jquery-mobile command but after twenty minutes and just a blinking cursor below the command in my cmd.exe program its clear something is not right. I looked online but cant find any clues to date.
    I have come to think its the location of the C:Documents and SettingsJames Goodwin.npmrc (not C:Users{Username} as in tutorial above) The location of node and npm is the default install C:Program Filesnodejsnode_modulesnpm
    My system is Win XP SP3 any help would be much appreciated if you have the time.
    Judging by the answer below I shoud begin with OnsenUI and not Jquery Mobile anyway.


  20. Hi Jimmy. If you want my recommendation then switch to OnsenUI. While still technically alive, jQuery Mobile is dead technology. It’s simply outdated. On the other hand, Onsen UI (version 2.0) is platform agnostic so you can use it with any framework you prefer.

    If jQuery is what you want then you can use it, or AngularJs, it doesn’t matter.

    It’s also similar to jQuery Mobile in a way you build page structure. For example, if you’re AngularJS user you don’t need to do any page routing (like with Ionic Framework or vanilla AngularJS), everything is done automatically in the background.

    • I’m going to take your advice Dragan thanks. Its deep end for me as I was familiar with JQMob but I’ve learned in my time in web development that choosing a platform that you can grow with which is well supported is the best way to go long term.
      I don’t have any experience in app development but I do see that html5 hybrid app development is attainable for me and this model is here to stay in the medium to long term. Apps built solely in native code will become less necessary as time goes on.


  21. Wow…tats brilliant. Please can you provide me with code for developing a directory app? Where people can search for various categories and services. Really would appreciate your help.

  22. Thanx for the tutorial. I works for me, but how do I change the Target SDK version . It provide me API 23 , i want to use 20, thanks for replay…

  23. Great tutorial, however when pressing the Back button on the Movie Info page the list briefly appears but then it jumps back to show the Movie Info page again. With the slide transition off it works perfectly, any ideas how to stop that? Thanks

  24. Hi, thanks a lot for this tutorial…i need to make a button to close my app launcher…yes…my app was converted into a launcher, and i don´t know how to close it and change to android launcher default…i can close the app, but not the launcher…how can i do it using a button??? Thanks!!!!

Leave a Reply