Sample Application using jQuery Mobile and PhoneGap

Here is a simple application I built using jQuery Mobile and PhoneGap. Even though the application is simple, it covers some common requirements of mobile applications: database access through JSON services, multi-level master-detail views, parameter passing between views, etc. You can play with the application here, or download the source code below and build it for different mobile platforms (using the PhoneGap tools or the cloud-based build service at

Run the Application

Click here to run the application.

  • The first view shows a list of employees. The bubble on the right indicates the employee’s number of direct reports. You can filter the list by typing a few characters in the filter box at the top of the screen.
  • Tap an employee to view details.
  • If the Employee has direct reports (for example James King, Ray Moore, Julie Taylor, and John Williams), tap “View Direct Reports” to see the list.
  • If the Employee has a manager (all the employees except James King, the CEO), tap “View Manager” to view the manager details.
  • Tap “Email” to send an email to the selected employee using your default mail client.
  • When running the application on a phone, you can tap “Call Office”, “Call Cell”, and “SMS” to trigger the corresponding actions.

Download the Source Code

You can download the source code (HTML, JavaScript, CSS, PHP services and SQL script) here.

Code Highlights

  • The approach taken in this application is a complete separation of the client and server code: no intermingled HTML and server-side scripts. The client application is made of pure HTML files invoking JSON services using jQuery’s ajax() and getJSON() methods. The services are written in PHP, but you could point to Java, .NET, RoR, or ColdFusion services without any change to the client app.
  • jQuery Mobile allows you to code all the pages (views) of your application in a single HTML file or to keep your HTML files separate. Regardless of the approach you choose, the pages will be loaded into a single document at runtime. This is required to support the animated page transitions. (You can explicitly ask for an HTML file to be loaded in a separate document, but you’d lose the animated transition).
  • I chose to keep my files separate, because I find it easier to manage non-trivial applications, and most importantly, because this was the best approach to get page navigation to work right in this application (specifically for same page transitions: i.e. transition from Employee to Manager).
  • Because the pages are loaded in a single document, you only need to include the .css and .js files in the first page of your application.
  • For clarity, I created one .js file per page (employeelist.js, employeedetails.js, and reportlist.js). Since they are all loaded in jQuery Mobile’s single document anyway, it would make more sense to combine them into a single (and minified) .js file for a production application.


You can use PhoneGap to package this application for different platforms. This version of the application doesn’t use any of the PhoneGap native APIs (GPS, camera, accelerometer, notification, etc). In my next blog post, I’ll show the same application getting the data from a local database (using the PhoneGap database API) as opposed to PHP services.


  1. I posted a version of the same application built using plain jQuery here.
  2. I posted a version of the same application getting data from a local database using the PhoneGap database api here.
  3. I posted a simpler version of the same application here.
  • Pingback: Why I’m Doing PhoneGap | Ryan Stewart – Mountaineer Coding()

  • Thanks for the post. Always interested in seeing how JQM performs, so your latest example is helpful. Looking forward to seeing your post about using the PhoneGap APIs. Are you also planning to cover the geolocation API? Many people are having issues with this API (especially getCurrentLocation and watchLocation) with the latest version of PhoneGap (1.1.0). Thanks!

  • Thank you CHRISTOPHE, it’s great to see you posting on JQuery Mobile and PHP services. I really like PHP as a JSON service provider and JQuery with or without mobile can consume such services so easily.

    Please keep it up! Over the past 6 months I also followed JQuery Mobile and PhoneGap because it allows us to make applications for low end smart phones. I do work with Flex Mobile, but AIR does not run on on the mid to low end Android smart phones in our market.

    JQuery Mobile is the best solution, compared to Sencha Touch which has the same problem as Flex/AIR Mobile.

    Welcome to RIA with WebKit!

    • Vijay Kumar

      Hi Andre,

      I also works on Flex Mobile… but i have to support blackberry curve for the app that’s why i am thinking to use PhoneGap…. Can you please let me know that it would a good solution for BlackBerry Curve?

      Thanks in Advance..

  • Philip

    thank you very much for this explanation,
    can’t wait for the next part of this article (php/local db)!

    all the best!!!

  • Patrick

    First, when I use a .rar file, build.phonegap they don’t like this file type. After I change it to a .zip file type, I get the following error. Do you have any ideas?

    .zip ERROR:
    Unable to create app: /var/rails/ was not created

  • You may need to make an Ajax call with a resultHandler – the $.getJSON(…) does not appear to work in phoneGap local or with the services deployed remotely.

    See the example here:

  • Hi CHRISTOPHE, Delete my previous 2 comments. I figured out the issue that prevented the iPhone/PhoneGap version from accessing the remote services. There is a PhoneGap.plist with a property “ExtenalHosts” – it needed the domain for the remote services. Once I set that to “” it worked. No cross domain issues at all.
    The $.getJSON(…) works just fine in your application.

    • Sayem Ahmed

      Hi i am a new developer in phonegap. can you please tell me briefly what did you actually do for cross domain problem. Though i change the Phonegap.plist but it is not working yet. also i want a solution for android :)

      • rrrrr


    • Thanks, now working perfectly after setting the external host to my server, and many thanks to Cristophe for the great sample.

  • thanks for the sample, and let me download the source code. :)

  • Dave

    Thanks for a great article. I am just learning JQuery and I like many others have encountered the issue of passing query string parameters from one page to another, each page has a separate HTML file. I have downloaded the code, and for the life of me I cannot get the employee details page to accept the parameter of the “id”. Are you using anything other than JQuery to make this happen? I apologize for such a question, but I have tried many times to make this work. I must be overlooking something obvious.

    • Ruben

      replace: $_GET[id] with $_GET[‘id’]

      • thanks man u sav me alot of googling..

  • Dave

    I should also mention that I CAN get a page to accept the parameter IF I refresh that page.

  • Pingback: Sample App: Mobile jQuery without jQuery Mobile()

  • sriram

    thanks for the article. does phonegap, jquerymobile work in ios5 using xcode 4.2. i m creating one but $.getJSON method fails..
    any ideas?

  • Patrick Whittingham

    Does this app work with the iscroll.js like the other example?

  • neetin

    Thank you Christopher for sample code. But it did not work in my xocde 4.
    I downloaded your source code and place server part to my xampp/htdocs folder and created database using dump file, other www folder’s file copied to www folder of phonegap app , when I built and ran, it only showed search bar and title bar, other part was empty.
    Please help.

    • Adhitya

      If you use eclipse as emulator then change var serviceURL at employeelist.js from localhost to It works to me.

      • I was having the same issue, I changed from localhost to and it worked, thanks you very much.
        Well, I still have a question: why does it work with 10..0.2.2?
        Thanks again

        • hardsolidman

          i’d tried your way many times… but it goes same… it just doesn’t display the list… all i see just a filter box… any otherway…? sorry for my bad english

          • hardsolidman

            finally it works… i set
            var serviceURL = “http://localhost/directory/services/”;
            var serviceURL = “”;
            now i want to ask question… is it possible to import some data to localhost from phonegap app…?

    • sorry for my english.
      same for me, only the search bar, but if a run the code over the internet, it shows right :/
      you solve the problem??

    • If you put the services files and the database on a web server, set correct values in config.php (db ip, dbuser, dbpass, and dbname) and point to the service url in in employeelist.js the app works perfectly.

      Many thanks to Christophe for this very useful and well designed example.

  • Thanks for the article. does phonegap, jquerymobile work in ios5 using xcode 4.2. ?
    I have installed your ‘EmployeeDirectoryLocal’ demo on PhoneGap and it works fine.
    But I am having a problem with ‘EmployeeDirectoryJQM’ … all I display is the Search Box “Filter Items”
    I can not get a Employee List…. and that is what is needed. I thought maybe the problem is with the “serviceURL”
    var serviceURL = “http://localhost/directory/services/”;
    Can I get some help on how to setup the Services…
    p.s. Is it possible to setup the Search for ‘EmployeeDirectoryLocal’

    • Goosh2

      Did you ever get a response to this issue? I have the same question.

  • neetin

    Finally it worked when I hosted server code to my web server. It did not run in localhost in my computer.
    I have a question. Can I run it in other computer in LAN? If it works than it would be easy for development.


    • Tushar

      Please let me know about the same issue if you get to know
      Thanks in advance.

    • Aniket

      didnt work for me on a local web server. any solutions?

  • neetin says:
    October 31, 2011 at 3:05 am
    Finally it worked when I hosted server code to my web server. It did not run in localhost in my computer.

    neetin or who ever:
    what specifically do i need to as far has a host server connection ‘server code’ do i need to do.

  • I am having a problem with ‘EmployeeDirectoryJQM’ … all I display is the Search Box “Filter Items”
    I can not display the Employee List…. I thought maybe the problem is with the “serviceURL”
    var serviceURL = “http://localhost/directory/services/”;
    Can I get some help on how to setup the localhost…or a personal WebServer.
    I am a beginner: Xcode and PhoneGap and also the Max. I have installed Xcode and PhoneGap on IOS 5.

  • Pingback: jQuery Mobile “Getting Started” Application()

  • The back button doesn’t work (Chrome 15, Ubuntu 11.10).
    Calling the pages directly, such as doesn’t work neither.

    Is it a jQuery problem?

  • Pingback: How to Build Application using jQuery Mobile & PhoneGap | CS5 Design()

  • Pingback: How to Build Application using jQuery Mobile & PhoneGap | uxstats()

  • Pingback: Come costruire un’applicazione usando jQuery Mobile & PhoneGap -

  • gokhan

    when use url parameter like ?id=15 this sample on phonegap
    I have deployed android application made with phone gap, and I haven’t
    problem with emulator ,android mobile and web browser.

    But when i install that application on android extra large screen
    tablet device it shows following error when i click on cell of table.

    Application Error: The web page contains an error. (file://

    In my application I am displaying list of names in table and when user
    click on any cell of table it will navigate

  • Pingback: Come costruire un’applicazione usando jQuery Mobile & PhoneGap |

  • Pingback: How to Build Application using jQuery Mobile & PhoneGap | PHP Ocean()

  • nice demo application. But for my own application, I have a large list via RSS. Is there a way to add paging?

  • This is great as it is very modular for the most part (some html in JS of course). Couple things – how about storing the id in a session variable instead of having to pass it all around (as we did with regular webapps). This also avoids have to create a separate HTML page for the detail page. Also isn’t the ‘live’ function not recommended?

  • Frank

    Hi Christophe,
    this is really a very useful demo app, which answers many of my jqm-mobile questions in a very elegant way. Thanks for posting it!

  • Jota

    Thanxs, it worked great for me too.

  • Hi, looks great on my computer but when I browse to on my iphone4 I just get an ‘Employee Directory’ title on a blank page. How should my phone be set I wonder

    • weird, had to reboot the iphone, now it works

  • sohi

    I am getting this error while invoking a web-service from phonegap+android app.
    01-13 23:49:52.219: E/Web Console(529): Uncaught TypeError: Cannot read property ‘documentElement’ of null at file:///android_asset/www/soapclient.js:158

    Here is the code in which error is coming.

    var ns = (wsdl.documentElement.attributes[“targetNamespace”] + “” == “undefined”) ?
    wsdl.documentElement.attributes.getNamedItem(“targetNamespace”).nodeValue :

  • sohi

    I am developing an app using phone gap and jquery mobile. App works fine on iPhone but when I’m running the same app in android emulator, there are some issues. When i click on a button to goto next page, it loads the next page but again shows the first page for a second, then settle down on the second page. It’s kind of flickering issue.
    Please help me to solve this issue.

  • Alfonso

    Que tal soy de ecuador estoy utilizando phonega en android y tu aplicacion no sirve .solo se carga la parte del filtrado pero no se carga los datos no se por que …Pero utilizando el navegador todo funciona correctamente

    • sureshkumar

      I dont know hindi

      • Arjun

        Hahahah. That’s not Hindi!! :D

      • krishnaveni

        Hi…u don’t know any language means u r used google translate…
        Then y developed that translate application in hereafter use it google translate…

  • sureshkumar

    I have doubt, I have developed a simple application using phonegap, can i use the code in iPhone or how can i use that into iPhone… Please reply this…

  • What kind of audio player do you use in your app?

    Im working on a project now with phonegap and jquery
    But i don’t find a good player yet.

    Can you help me?

    • Tushar

      why don’t you try simple html5 audio player option, that’s quite handy and useful to me!!

  • Thanks for the great article and a nice example app to get things started. I’m surprised I didn’t know about PhoneGap sooner, I can’t wait to start making apps! One thing I have noticed when I compiled your sample app and ran it on my android, the filter box isn’t showing for some reason. I haven’t yet spent any time to find out why but I just thought I’d let you know. Running 2.3.3

  • Does you php services version of this app qualify for phonegap/appstore?

    • Tim.
      I think so. That has become a pretty standard way of doing it.

  • Max A.

    Hi Christophe,
    thanks for this demonstration. Unfortunately I’m new to jquery/phonegap. So it would be very nice if you’d find some time to also show how to make an own search filter using own form elements. Like for example using a radio button to filter male/female instantly without hitting a submit button. Just like the current search field works. I’ve only found code snippets using $.post() or $.serialize() so far but I don’t really know how to integrate it and use it without any submit button.
    Thanks in advance.

  • Max A.

    Hi Christophe,
    thank you for this demonstration. Unfortunately I’m new to jquery/phonegap. So it would be nice if you’d find some time to make another example showing how to integrate an own live filter using own form elements. For example using a radio button to filter male/female instantly without using a submit button. Exactly like the current search field works. By far I’ve only found some code snippets using $.post() or $.serialize() but I don’t know how to integrate it or use it live without any submit button. (I guess you need to transfer all data from your external database via json first and let the filter only work within your client?)
    Thanks in advance.

    • Max,
      Do you want your filter to work client-side or server-side? You can use any event handler of any component to either send a new request to the server ($.ajax() or $.getJSON()) or loop through your data set at the client -side to filter out the data you don’t want.

      • David

        First of all, thank you for the example. It works well and explains a lot about phonegap and JQM. My intention is to use POST instead of GET. I have tried to use the $.ajax and found that I “have to” use JSONP instead of JSON which limits to the number of bytes in JSON, too. this is due to cross domain. I understand I could use CORs.

        Anyway, does phoneGap + Jquery support JSON through HTTP POST? My intention is to transfer bigger amount of data. Thank you,

  • Max A.

    Uups, I’m sorry for the double post, I thought my first one went into Nirvana ;-)

  • Why are the script files at the end of the body? Why doesn’t the app work if you move them up to the head?

  • Out to dry

    It is great that you take the time to show how you built this app, but not so good that you abandon the visitors by not replying to a single entry. This is so typical of Adobe employees, hey look what I can do, but go figure it yourself guys ;)

  • Out to dry


    If you look in the getEmployee.php file, change the following:

    $stmt->bindParam(“id”, $_GET[id]);


    $stmt->bindParam(“:id”, $_GET[‘id’]);

    This should fix the id problem.

    • Ram

      @Christopher thank you for putting this together
      @Out to dry , this really helped…great & thanks a tonne

  • Scott Hummel

    Is there a way to make this work without PHP? Can it be done with just HTML and Javascript?

  • say

    i am exprement this error
    DroidGap: GapViewClient.onReceivedError: Error code=-1 Description=A network error occurred. URL=file:///android_asset/www/index.html#page2
    any help

  • Trisha

    WOW. I have been searching a lot to find out exactly how to create a jquery mobile website in a way to be able to convert it to phonegap. Your example site files was EXACTLY what I needed – it answered soooo many of my questions and taught me so much. THANK YOU!!! Im soooo looking forward to reading your other stuff!

  • agdish

    Please can some body help me. I installed both Employee Directory JQM and Local in local and server but always i get just only filter form, no list displayed.

    • Change localhost for in employeelist.js

  • Say

    Hello Christophe .May I know what IDE are you using for this .Can I run this code in Eclipse IDE ?Please let me know on this.

  • Woody

    Would anybody happen to have converted this sample/example source over to Android?…would like to see how the “AndroidManifest.xml” file gets configured, etc, etc.

  • Barsum

    Hi Christophe,
    I was very happy to find this tutorial, as I’ve had a hard time finding the best way to link to a page that changes content based on the selected link. I was also a bit surprised to see that you use GET parameters to pass the id, as the JQuery Mobile claims that it doesn’t support parameters passed:

    “jQuery Mobile does not support query parameter passing to internal/embedded pages but there are two plugins that you can add to your project to support this feature. There is a lightweight page params plugin and a more fully featured jQuery Mobile router plugin for use with backbone.js or spine.js.”

    When I deploy the application to Android emulator the first screen opens fine, but when I click a link, JQuery says “Error loading page”. If remove “?id=…” from the link it can actually open the employeedetails page, so it seems there are problems using parameters.

    On the other hand, the demo application seems to run fine in Chrome / Firefox?!

    Did you not have any trouble running in Android SDK?

    Best regards,

    • Rachel

      I have this same issue, “Error Loading Page” pops up when I run the application on an emulator (from employeeList to employeeDetails). Should this be the case?

      • I Have same probleme with u when i running in localhost is running well..but when i trying in android emulator i click the link to the detail employee is cannot appears…

        • Deepen

          guys, change the following lines to get the problem solved.

          $stmt->bindParam(“id”, $_GET[id]); to $stmt->bindParam(“id”, $_GET[‘id’]);

          Hence, your problem is solved.

          Notice that $_GET[id] is wrong.

          This line is found in getemployee.php

          :) cheers

  • Sanjay

    HEllo Sir,

    I downloaded your code, but i have question, here is what i wish :

    my sql database on my webserver server, and i want to compile this application and it runs on my android phone but when i open the page, it must fetch data from my webserver database and show on my cell, is that possible ? how do i do it ?

    and do i need to upload all pages including html and php and js pages to my webserver ? and then run the app ? pls guide, am bit confused about the connectivity.

    Best Regards

    • The folder ‘services’ must be in the web server and the folder ‘www’ must be in ‘assets’ folder of the application.
      The services folder includes a sql script named ‘directory.sql’ to create the database.

  • Chris

    Thanks for this! Your code is very easy to follow. Is there anything different I need to do to make it work from a remote server and not localhost (other than changing the url obviously)?


  • Pingback: Using $.each() within $.getJSON()

  • Jerome Bailey

    nice code. it was very helpful.

    question, your app works fine running it from the demo link above, but when i download it and run it on localhost, it doesnt work, you know why? its the same problem that i am having with my app, it doesnt work when i test it on localhost. the first page of your app works fine but once i click on an employee to go to the next page, it comes up blank.

  • Pingback: Sviluppare applicazioni dinamiche per mobile | openbrain()

  • Tolu

    Hello Chris,

    Nice post by the way. Please help me out. Is there a way to cache my json data from the database such that my app runs when the device is offline?

    I look forward to your reply, thanks.

  • Novice


    How can I run this code on my local machine?


    • Ruben

      download and install WAMP Server

  • velohomme

    This application doesn’t work. It suffers from a problem with jQuery Mobile: it doesn’t handle passing context in query parameters well. For a demonstration of the problem with this application click on an employee from the directory. Looks okay. Now hit refresh the page. Nothing shows up. This is a symptom of the query parameter problem with jQuery Mobile. I can’t imagine building an app with jQuery Mobile until this issue get some serious attention.

    • Ruben

      replace: $_GET[id] with $_GET[‘id’] in getemployee.php

  • Hey Christophe,
    Thanks for your sharing.
    I Want to ask you, Examples of applications that you provide only to read from the database, can you help me make an example: insert, delete, update? I mean CRUD.
    Also the login -logout. Multi user logic . So every user who can login to read the data online with the help of php on the server and json.
    Thanks for help.

  • Alain Dumont


    I’m trying to make a mix application base on these exemples.

    I want to use :
    – jquery mobile ;
    – phone gap ;
    – a local DB.

    What changes must I don use in employeelist.js and in employeedetails.js to make it works ?

  • Hannah

    i oficially love you, thank you SO MUCH for sharing this.

  • estelle

    I would like to build an application using phonogap but i don`t have any clue.I will do on Eclipse software.Please help

  • Nico

    This should be the official JQuery Mobile sample, I learned 100x times more from this example then by reading the docs.

  • jorge

    I’ve tested the app with Chrome and with Ripple. Works like a charm! {=^)
    This is by far the best tutorial I’ve found about this matter. It’s just a perfect introduction.

    Thank you so much for this!

  • Gautham

    Great example, and description; thanks a lot mate!

  • Harry

    I have a phonegap apps in android written in Dhtmlx Touch, I want to convert it into jquery mobile anyone tell me how to convert Dhtmlx Touch code into jquery mobile.

  • Hector Ramirez

    You are very kind to share this article, for me was very usable, it´s Works well, thanks a lot…

  • Thank Chris – this is a very good example. Have you extended it to include caching so users display cached content if they are not online?

    Again, very well written.


  • Pingback: 5 ways to learn how to make stuff for fun | Tammy Butow()

  • Pingback: 5 ways to learn how to make stuff for fun | Tammy Butow()

  • Pingback: Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes()

  • Pingback: Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap | PHP Developer Resource()

  • somuraja

    Can you explain me any contact form example.
    I want to submit a form in database

  • claire

    Thanks for the post. It helped a lot for me, Im trying to create mobile applications and this is a good start.
    downloaded the source code and run it in my local..pufff. it works like a charm except for this small thing.
    I changed $stmt->bindParam(“id”, $_GET[id]); to
    $stmt->bindParam(“id”, $_GET[‘id’]);

    Thanks again. :)

    • Hey did you implemented into phonegap android cordova??

      I am getting no luck with it..

      Any hints will be appreciable…

  • You are very kind to share this source code, for me was very usable,

    thanks a lot~

  • Tom

    Very helpful, thanks.

    I have tried to create my own version but running in to some problems.

    My first page is just a static listview with menu. This then takes the user to another listview page which calls the json and retrieves the MySQL data.

    However, the page transition works fine, but no data is shown.

    How can I debug to see if the js isn’t being called, or whether it’s an issue with my SQL query etc?

    Tks for any help.

  • JP

    thanks for this demo!
    One question: I noticed that the actual employee pictures are stored locally within in the app and only the name of the picture is retrieved via the RESTful PHP call. How would you go about storing the picture in a directory on your server and then sending it along with all the other data via the PHP call and then rendering it?

    Thanks and regards

  • dd

    Your photos are broken

  • Thank so much

  • Hsm

    Greaat job .. thx Christophe

  • Aakriti

    act i m jst a beginner wid jquery mobile..i wantd to kno..tht i hav developed an application using jquery mobile…nw hw do i run it on my symbian phone or rather convert it in2 symbian application usind phonegap..??

  • Aakriti

    act m a beginner wid jquery mobile..i hav developed an application using jquery mobile..nw hw do i convert it using phonegap so tht it runs on my symbian phone..??

  • Abdullah Al Mamun

    I am new in PhoneGap. After running this app in Android, I do not see list of data fetch from database directory.sql. I only see filter items search box. I want to know where to keep the services folder. I kept it in asset folder. plz help me what should i do to fetch data from database.


  • Faraz

    This is a great tutorial. There is one problem which i am facing. When i run this on pc brower, it showed correctly. But when i make apk file using phonegap, it installed on the Nexus but when i run the app , it showed the page but not in android app style. It just shows as simple HTML page with all elements in it. What could be the problem here ?

  • Hi.. Thank you for the wonderful post.. Indeed helped me alot..

    You have mentioned this can be easily used into phonegap.. I tried it in phonegap eclipse cordova.. Not working with me..

    If you have this already converted into android phonegap project.. can you share those files to me on my email??? I would really appreciate you over that.. Please help.


  • Supriyo

    Really wonderful tutorial on jquerymobile – is there any widget for nice gridview not like big grid jQuerymobile provide, may be using jqueryui css and js – is there anything like this – and also can we arrange for any pagination in your listview like we have filter – so if pagination is also available then it would be really fantastic.

    Thanks in advance …

  • renux91

    I need a similar app but I have a great problem
    when I put the source in local wampp works fine, but when I edit file emplyeelist.js for external connection (in var serviceurl =””) doesnt work. I have a database in other domain.

    Any idea?!

  • Nnamdi

    Please who has come past the search display only stage??

    I have set-up the application on my localhost but it does not display the results from the database.
    Please someone help.

  • Pingback: Page not found()

  • Bax

    I download source code, made new PhoneGap (2.0) application and set everything (database, service, config) but I get this error on 4.0.3 (Galaxy Note):

    call to OpenGL ES API with no current context (logged once per thread)
    couldn’t load the vertex shader!

    Please help me to solve this issue,
    Thanks in advance,

  • Thank you CHRISTOPHE. Most of my doubt is gone after reading this post and comments.

  • Nitin

    The tutorial is very helpful for me.
    thank you very much

  • phonegap build is awesome tool to build hybrid apps,thank you so much.Here is the nice explanation on the basics of PhoneGap i found it here.Very useful

  • Driedoezoe

    Thanks! Really helped me to get started

  • Well, I’ve been testing this code in Android but I’m having the following issues:
    1. When I click on some link like email or SMS it opens the right app to achieve those functions but when I hit return it always goes to main page. Is there any way the app “remembers” the last state?
    2. When I hace autorotate feature on, the app just exits with no error.
    Any ideas?
    Thanks a lot…

  • Hi,

    The images in the demo app are broken. Please fix.

  • Pingback: Using Backbone.js with jQuery Mobile | Christophe Coenraets()

  • Pingback: Using Backbone.JS with jQuery Mobile | Appliness()

  • Pingback: Helpful Developer Resources - Part 1 « Development AdvantageDevelopment Advantage()

  • fer

    Hello, this kind source code works on browser in my localhost, but I am build a phonegap application with this code and it doesn´t work.
    Any idea?

    Thanks in advance

    Thank you Christophe Coenraets for your kind code

  • snoutz

    Thanks a lot for a great samples, it works perfectly on emulator and my galaxy. I’m a newbie on phonegap. With your samples i got many learning point : how mix between jquery, jquery mobile and phonegap(apache cordova now;i’m using cordova.2.2.js), how to connect with android sqlite, and beautiful layout trick using iscroll and more.

    Guy, you are very-very generous..hope everyone expert do this too

  • thanks.. Very helpful..

  • Philippe Warnon

    Great post, thanks.
    Just a little question, what would you suggest to secure the communication between the client app and the rest api on a server ? Do you have an other post about it ?

  • Chris

    Great to see a tutorial covering all the aspects of this process rather than finding all the bits & pieces and trying to put them together.
    But one big problem – the page transitions (on both Android and iOS) are far to slow. Also (iOS only) the filter search is incredibly slow, I have to wait a few seconds between each key press. I found some forum items about these problems but they seemed to be for an earler versions of jQueryMobile (I am using 1.2)
    I have modified the code slighlty to get the data from a XML file on a remote server , rather than json and php – the data loads quickly enough, it’s just working with it that’s impossibly slow.

  • Hey, thanks for the tutorial.

    I can run the codes on iOS (developed on Mac) but not on android(developed on Windows).

    Could you tell me what might be the problem? cuz i tested the php codes on the localhost and it gives me the json response. But on the emulator it doesnt give anything at all. I’d be glad if you could help me with this.


  • mat

    Ummmm it’s that nobody reported that your missing comma’s in getemployee.php

    $stmt->bindParam(“id”, $_GET[‘id’]);

    • mat

      Oh i forgot greate Article !!!

  • James Dang

    Could anyone explain what is js/index.js used for? I did find who calls it.

  • James Dang

    This sample works fine in Android Emulator with JQM1.0rc1, the only problem is the fixed bar is not really fixed. When using JQM2.0, the bar fixed, but the EmployeeDetail page won’t show up, only a blank page is showing. Does anyone know the solution?

  • James Dang

    I’m using PhoneGap 2.4.0 with JQM1.2.0Final. My codes is

    My Details

    I run it in Android Emulator. It shows a white screen when click the link “MyDetails”. But if change to JQM1.0.rc1, it works fine.

    Anyone knows the reason?


  • Luis Fernando

    Hello my friend,
    Please help-me how to list employees name with accents Ex. João, José …

  • It’s really very cool :) Thanks for sharing

  • Hello friends.
    Sorry for my english
    i was trying to include this files in a Eclipse(Phonegap) project.
    But it always show me errors.

    Any of you can to include this files in a eclipse project successfully??

    thanks guys!

  • espresso machines

    This design is spectacular! You obviously know how to keep a reader amused.
    Between your wit and your videos, I was almost
    moved to start my own blog (well, almost.
    ..HaHa!) Great job. I really loved what you had to say, and more than that,
    how you presented it. Too cool!

  • SIddharth

    How i use $.ajax to call webservices from localhost or
    in phone gap using JQUERY

  • vignesh

    this is really nice ! is there any posiblities to display the employees according to their location ! that is if v r in boston ! jquery should send data to php and filter the employees who belong to boston !!!

  • Bishal

    Just wanted to thank you soo much for making this tutorial. All the contents are working except the images. Do i need to make any changes for images to load?

  • John Durbin

    Thanks! I have been studying your code and trying to implement what I’ve learned in my own projects. I keep having problems with losing the results from the listview when returning from a detail view or from another page in the app. Actually sometimes results from a listview remain and sometimes they don’tand I cannot figure out why. One solution I read was to include the references to the javascript files in more than just the index.html file. But that doesn’t work. Why do results from a listview disappear? Thank you!

    • John Durbin

      I found a solution :/ Adding data-dom-cache=”true” to the data-role=”page” div.

  • Andy

    When I go to using a normal web browser (chrome) nothing appears except for a filter. But no employee list.

  • DK

    Your only demo is broken:

    {“error”:{“text”:SQLSTATE[42000] [1049] Unknown database ‘demo’}}

  • Pingback: Create Your First Mobile App with PhoneGap Build – Using the Notification API | Flippin' Awesome()

  • adika86

    Thank you, nice post! There are not so many apps with this technique. Recently I found a quite a good app, on google market, which was made by jqm and phonegap. I think it’s called close2u or someting. Again nice job!

  • Pingback: Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap - Tech Forum Network()

  • Hai

    What i don’t realize is in fact how you are not actually much more well-appreciated than you might be right now. You’re very intelligent.

    You know therefore considerably with regards to this
    matter, made me individually believe it from numerous various angles.
    Its like men and women don’t seem to be interested except it’s something to accomplish
    with Lady gaga! Your personal stuffs excellent. All the time maintain it up!

  • Arif

    Thank you christophe, it’s great to see you posting on JQuery Mobile and PHP services. Can you show me how to arrange header to be in fixed position by using jquery mobile like your tutorial example without using jquery mobile. Thanks before

  • Rabiu

    Thanks for the post it would be of help if you give us a tutorial on how to separate the client side and server side files with the necessary edit we need to make using phone gap, and hosting the services folder and i use phone gap to build the www folder into and android apk. changing the var serviceURL variable directing to my services folder in the server side but just displays the search bar only. your response would be of great help to me and many others. Thank you

  • Pingback: Un completo ejemplo de Phonegap, jQueryMobile, PHP, MySQL, JSon… | Programación de Dispositivos Móviles()

  • Thierry Otis

    Very good tutorial. I take it and come back here.

  • Pingback: Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap | Ask Programming & Technology()

  • Jack

    This is very usefull, thank you,
    i’m just wondring what did we call the protocol used is it JSON-RPC?
    Thanks for replying to me.

  • Pingback: Three great phoneGap tutorials » VC-TEL Team Blog()

  • coco

    Hi,Thanks very much.
    Finally , I found the problem for the guys who view the search sould change this,

    var serviceURL = “http://localhost/nova/services/”;
    var serviceURL = “”;

    if you access your project by http://localhost ,use this var serviceURL = “http://localhost/nova/services/”; else

    var serviceURL = “”;


  • Ivan

    Chris, tnx for source code of this great apps :)

    I’am beginner in all of this and i need help from you guys. I downloaded the source code and try it on local web server WAMP and it works great. I want to see how it works on my android tablet, but i don’t know how to implement .sql files and with phonegap to convert it to .apk file. I know how to convert apps that don’t have databases or apps that use local storage, but i don’t know how to handle with apps like this one that use external sql file.

    I need to convert apps like this one that have .sql files. What to to with .config file (in this example we have info in it that helps us to connect to our localhost), but how to convert it in android.. pls help :( I am looking for solution a few days already but with no result :(

    tnx in advance

  • Jim

    Hello, thank you very much for the tutorial! I am having a problem if I use the latest Jquery mobile release, do I have to modify the .js files? Thank you.

  • Ted

    Thanks for sharing. Informative tutorial with great examples and info. I appreciated that you provided references to different versions and a coupe good screenshots. JQuery mobile and PhoneGap is a good stack to use for responsive mobile apps.

  • BuddySteve

    The web mobile version you linked at the top doesn’t appear to be functional. I get the title Employee Directory and a search bar but nothing comes up no matter what I search for. Is this still working?

  • Rhino Mob is a Mobile and Social Gaming Startup. We create High Quality, Visually Entertaining and Addictive Games for the iOS and Android Platforms.

  • Rhino Mob is a Social and Mobile Game Company. We create High Quality, Visually Entertaining and Addictive Games for the iOS and Android Platforms.
    Mobile Application Source Code

  • Pingback: Un completo ejemplo de Phonegap, jQueryMobile, PHP, MySQL, JSon… | Centro Inca()

  • Thank you for some other fantastic post. The place else may just anybody get that kind
    of information in such an ideal way of writing?
    I have a presentation next week, and I am on the search for such info.

  • I don’t write a leave a response, however I browsed a great deal of
    remarks here Sample Application using jQuery Mobile and PhoneGap | Christophe Coenraets.
    I do have a couple of questions for you if you tend not to
    mind. Is it just me or do a few of these responses appear like they
    are left by brain dead visitors? :-P And, if you are posting on
    additional sites, I would like to keep up with anything
    new you have to post. Would you list of all of all your social networking pages like your Facebook page, twitter feed, or linkedin profile?

  • It is easy to control your snowboard figure
    and the gameplay is addictive because each level is different.
    A Handcent widget on your phone also tells you if you have
    new messages and how many there are. This video game can be extremely
    addictive and it will get demanding.

  • Vasudev

    Hello sir,

    I am new in phone gap, sir i have to access sqlite database in phone gap how is that possible. can you help me.

  • I’ve been surfing online more than 3 hours today, yet I never found any
    interesting article like yours. It is pretty worth
    enough for me. In my view, if all site owners and
    bloggers made good content as you did, the net will be
    a lot more useful than ever before.

  • Wow, marvelous blog structure! How long have you
    ever been blogging for? you make blogging glance easy. The entire look of your site is great,
    as smartly as the content!

  • Pingback: 4 Best PhoneGap Tutorials | Mobile Dev Resources()

  • I love your blog.. very nice colors & theme. Did you design this website yourself or did you hire someone to do it for you?
    Plz respond as I’m looking to create my own blog and would like to find out
    where u got this from. thanks a lot

  • Pingback: JQM & Domino Data Service (2) | Kwintessential Notes()

  • Wow very good jqueryplugins …….for you

  • Fadjar

    Hey Christophe,
    Thanks for your sharing.

    I want to ask about html_entity_decode() function…
    How implementation html_entity_decode() to your application, on the program getemployee.php or employeedetails.js

    Thanks alot….

  • Pingback: jQuery Mobile “Getting Started” Application | whatabout()

  • Shalini

    Hi I’m new to phonegap.I’ve referred your example it works good.

    How to encrypt the data and store it in sqlite DB?

  • Good jop good blog and shareds thansk for works

  • Thank you so much ! Very good topic !

  • Thanks for the great tutorial. I have installed this successfully (almost) on my local machine and the first part works okay, list the employees with pic. However when I click on the detail view it does not.
    I went further and checked the php code for 1 row value and am getting this error: for the below code
    Notice: Use of undefined constant id – assumed ‘id’ in C:\xampp\htdocs\JqueryMobile\EmployeeDirectoryJQM\EmployeeDirectoryJQM\services\getemployee.php on line 13
    {“item”:{“id”:”1″,”firstName”:”James”,”lastName”:”King”,”managerId”:”0″,”title”:”President and CEO”,”department”:”Corporate”,”city”:”Boston, MA”,”officePhone”:”617-000-0001″,”cellPhone”:”781-000-0001″,”email”:””,”picture”:”james_king.jpg”,”managerFirstName”:null,”managerLastName”:null,”reportCount”:”4″}}
    Because the error the data is not displayed. Please someone help me on how to fix this and I would be running again. Appreciate any help on this and many thanks in advance!!!

    • I found the solution, on the getemployee.php the id parameter was missing quotes around id.
      Here is the fix:

      $stmt->bindParam(“id”, $_GET[“id”]);
      and everything should work. Thanks

      • rheza winahyu

        thanks the code work perfectly :D (y)

  • j query… i wanna learn it but…. i am so stupid and i have not a teacher
    what j query is java?

  • Pingback: Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap | Some Cordova Questions and Answers()

  • // when click on list not load page …error appear”
    $.each(value[‘sublist’], function (index, value) {
    newdata += ‘‘ + value[‘name’] + ‘


  • RRpandey

    serviceURL = “”; not fething data as i have uploaded the data to check on server first. i tried with phonegap that also not working.

  • thanks , i like javascript and ajax. because that work at client side dynamically and helps to reduce server side load. thank you for jquery mobile application

  • Rather than have all the

  • Pingback: Structuring a PhoneGap jQuery Mobile Application | Some Cordova Questions and Answers()

  • Thanks for the article

  • Suit

    Great article! I’ve tried to run the online app:, but the employee list is not loaded. Why is that?

  • çok başarılı paylaşımlar devamını diliyorum

  • Any one can help me out !

  • Wery well jop thanks

  • herşey kaliteli üretim.Everything quality production

  • Bhavik

    Hello Guys, I’m not able to make a call by clicking on the Call button in actual device, it’s working in browser so can anyone tell me what could be the problem.

    I’ve added

    to my config.xml.

  • Pingback: Wich mobile development open source Framework should I use? [closed] | Some Cordova Questions and Answers()

  • said

    Thanks a lot. I leant developping mobile just by studying this example. Merci beaucoup

    • Olfa

      Hi, I try to do an application with phonegap and php web service nusoap. I create my web service and I work with android API 19 emulator. I don’t know how to do to create my project on android platform and to implement your application ?

      Thanks for help.


        could you please post some webservice that uses phonegap app.
        Thanks in advance!

  • kaj

    Loved your tutorial, great little sample cleared up a few questions i had wiith phonegap, only thing be fantastic if you had added a form for submission of employees or possibly crud. As having trouble with form submission to php mysql from phonegap aswell..
    That said, thanks for your fantastic tutorial files.

  • Sandeep Karnam

    Hi Christophe,

    Can you please share sample code to send email using phonegap as a standalone app.
    I need to collect html form data and send to some email without having any server in ios and android.

  • Avante Programmer

    hi, i have failed to link my cordova app to jquery mobile i have done the links same as you did, i tried lots today can you any 1 give me hint >?


    Please how to I get access to the source code?
    When i downloaded the zip folder i could not open the code with a text editor to be able to read


    Please how do I get access to the source code?
    When i downloaded the zip folder i could not open the code with a text editor to be able to read

  • Hendra Sebastian

    i have try, its work but i want ask how to open a youtube link using new tab without closing this application from this project your post? thanks

  • Ilaj

    Good thing. Glad I found this place. Keep this article on. Thank you

  • Pingback: JQuery移动电子书开发 – Coder Zone()

  • Pingback: cordova - Creación de plantilla/persistente de encabezado/pie de página de la plantilla en jQuery Mobile y PhoneGap()

  • Pingback: cordova - Creazione basata su modelli/persistente intestazione/piè di pagina del modello in jQuery Mobile e PhoneGap()

  • Robbie Khurniawans

    The rapid development of technology certainly makes us and everyone else have to continue to adapt in order to be able to follow an increasingly sophisticated and modern lifestyle.

    many things change in our daily lives because of technology and various tools created by various technology manufacturers. including the tools that you create will make a lot of changes and we hope to help many people improve the effectiveness and efficiency of work.

    From the tool that you made, I hope that you would like to tell how you made it to what it is today in order to inspire and motivate other people in making a sophisticated tool and helping many people

  • Ikhsan Rizky

    mantap, visit me at here

  • Good stuff. Thanks for sharing. You can also download apk from here

  • Awesome blog