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 http://build.phonegap.com).

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.

PhoneGap

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.

Updates:

  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.

188 Responses to Sample Application using jQuery Mobile and PhoneGap

  1. Steven Romalewski October 12, 2011 at 9:38 am #

    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!

  2. Andre Venter October 12, 2011 at 11:52 am #

    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 February 20, 2013 at 4:31 pm #

      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..

  3. Philip October 12, 2011 at 4:15 pm #

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

    all the best!!!

  4. Patrick October 13, 2011 at 8:20 am #

    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/okapi.com/shared/uploads/8d6ba2e0-f592-11e0-add5-1231390521a2/www.zip was not created

  5. Andre Venter October 13, 2011 at 1:17 pm #

    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: http://www.giantflyingsaucer.com/blog/?p=1948

  6. Andre Venter October 13, 2011 at 3:47 pm #

    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 “sub.domain.net” it worked. No cross domain issues at all.
    The $.getJSON(…) works just fine in your application.

    • Sayem Ahmed April 6, 2012 at 10:22 am #

      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 June 5, 2012 at 7:15 am #

        helooooooooooooooo……….

    • Fabio Crestoni December 27, 2012 at 12:46 pm #

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

  7. Yuan October 14, 2011 at 3:33 am #

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

  8. Dave October 18, 2011 at 6:54 pm #

    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 August 7, 2012 at 4:29 pm #

      replace: $_GET[id] with $_GET['id']

      • alain March 3, 2014 at 1:53 pm #

        thanks man u sav me alot of googling..

  9. Dave October 18, 2011 at 6:57 pm #

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

  10. sriram October 23, 2011 at 10:08 pm #

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

  11. Patrick Whittingham October 27, 2011 at 7:07 am #

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

  12. neetin October 30, 2011 at 5:56 am #

    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 July 4, 2012 at 3:49 am #

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

      • John Cardozo October 28, 2012 at 7:53 pm #

        I was having the same issue, I changed from localhost to 10.0.2.2 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 April 26, 2013 at 1:53 pm #

          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 April 28, 2013 at 2:12 am #

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

    • Diego March 3, 2013 at 12:45 am #

      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??
      thanks!!

    • paolo February 19, 2014 at 12:07 pm #

      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.

  13. Dennis West October 30, 2011 at 5:29 pm #

    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 March 12, 2012 at 10:34 pm #

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

  14. neetin 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.
    I have a question. Can I run it in other computer in LAN? If it works than it would be easy for development.

    Thanks,
    –Neetin

    • Tushar January 31, 2014 at 2:32 am #

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

    • Aniket February 10, 2014 at 9:34 am #

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

  15. Dennis West October 31, 2011 at 2:42 pm #

    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.

  16. Dennis West November 1, 2011 at 6:20 pm #

    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.

  17. ThomasDalla December 12, 2011 at 11:20 am #

    The back button doesn’t work (Chrome 15, Ubuntu 11.10).
    Calling the pages directly, such as http://coenraets.org/apps/directory/jqm/employeedetails.html?id=7 doesn’t work neither.

    Is it a jQuery problem?

  18. gokhan December 14, 2011 at 4:37 am #

    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://
    android_asset/www/index.html?id=15)

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

  19. Max Ng January 4, 2012 at 11:49 am #

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

  20. Will January 5, 2012 at 3:24 pm #

    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?

  21. Frank January 7, 2012 at 12:12 pm #

    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!

  22. Jota January 12, 2012 at 3:09 pm #

    Thanxs, it worked great for me too.

  23. Tim McKenna January 13, 2012 at 9:52 pm #

    Hi, looks great on my computer but when I browse to http://coenraets.org/apps/directory/jqm/index.html on my iphone4 I just get an ‘Employee Directory’ title on a blank page. How should my phone be set I wonder
    Tim

    • Tim McKenna January 14, 2012 at 6:01 pm #

      weird, had to reboot the iphone, now it works

  24. sohi January 14, 2012 at 4:07 am #

    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 :
    wsdl.documentElement.attributes["targetNamespace"].value;

  25. sohi January 14, 2012 at 4:10 am #

    Hi
    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.

  26. Alfonso January 15, 2012 at 11:00 pm #

    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 January 16, 2012 at 5:55 am #

      I dont know hindi

      • Arjun February 26, 2012 at 7:39 am #

        Hahahah. That’s not Hindi!! :D

      • krishnaveni July 6, 2012 at 1:27 pm #

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

  27. sureshkumar January 16, 2012 at 5:49 am #

    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…

  28. agus January 16, 2012 at 8:24 am #

    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 January 31, 2014 at 2:34 am #

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

  29. atomiku January 19, 2012 at 10:28 am #

    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

  30. Tim McKenna January 19, 2012 at 10:19 pm #

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

    • Christophe January 31, 2012 at 8:09 pm #

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

  31. Max A. January 20, 2012 at 1:16 pm #

    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.

  32. Max A. January 20, 2012 at 1:26 pm #

    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.

    • Christophe January 31, 2012 at 8:14 pm #

      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.
      Christophe

      • David September 9, 2014 at 12:03 pm #

        Chris,
        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,

  33. Max A. January 20, 2012 at 1:27 pm #

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

  34. Tim McKenna January 24, 2012 at 9:24 pm #

    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?
    Thanks

  35. Out to dry January 29, 2012 at 9:04 am #

    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 ;)

  36. Out to dry January 29, 2012 at 9:19 am #

    @Dave

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

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

    to

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

    This should fix the id problem.

    • Ram April 27, 2012 at 1:05 pm #

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

  37. Scott Hummel January 31, 2012 at 7:10 pm #

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

  38. say February 5, 2012 at 12:27 am #

    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
    thanks

  39. Trisha February 9, 2012 at 4:23 pm #

    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!

  40. agdish February 12, 2012 at 11:28 am #

    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.
    Thanks.

    • John Cardozo October 28, 2012 at 9:28 pm #

      Change localhost for 10.0.2.2 in employeelist.js

  41. Say February 13, 2012 at 7:12 am #

    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.

  42. Woody February 17, 2012 at 3:00 pm #

    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.

  43. Barsum February 20, 2012 at 9:08 pm #

    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.”

    http://jquerymobile.com/test/docs/pages/page-navmodel.html

    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,
    Barsum

    • Rachel April 4, 2012 at 4:13 pm #

      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?

      • badut August 15, 2012 at 9:21 am #

        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 June 9, 2014 at 7:49 am #

          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

  44. Sanjay February 21, 2012 at 9:47 am #

    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
    Sanjay

    • John Cardozo October 28, 2012 at 9:32 pm #

      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.

  45. Chris February 26, 2012 at 12:30 am #

    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)?

    Thanks!

  46. Jerome Bailey February 29, 2012 at 6:50 pm #

    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.

  47. Tolu March 1, 2012 at 10:59 pm #

    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.

  48. Novice March 7, 2012 at 2:32 am #

    Hi,

    How can I run this code on my local machine?

    Thanks!

    • Ruben August 7, 2012 at 4:50 pm #

      download and install WAMP Server

  49. velohomme March 12, 2012 at 1:33 am #

    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 August 7, 2012 at 4:52 pm #

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

  50. Bertho March 14, 2012 at 8:00 am #

    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.

  51. Alain Dumont March 22, 2012 at 2:07 pm #

    Hi,

    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 ?

  52. Hannah April 2, 2012 at 6:51 pm #

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

  53. estelle April 5, 2012 at 9:37 am #

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

  54. Nico April 12, 2012 at 7:20 pm #

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

  55. jorge April 18, 2012 at 4:12 pm #

    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!

  56. Gautham April 26, 2012 at 8:42 am #

    Great example, and description; thanks a lot mate!

  57. Harry May 4, 2012 at 10:44 am #

    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.

  58. Hector Ramirez May 9, 2012 at 5:09 pm #

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

  59. Jim Webster May 11, 2012 at 4:37 pm #

    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.

    Jim

  60. somuraja May 24, 2012 at 3:44 pm #

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

  61. claire May 25, 2012 at 7:52 am #

    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. :)

    • Vir J September 4, 2012 at 10:32 am #

      Hey did you implemented into phonegap android cordova??

      I am getting no luck with it..

      Any hints will be appreciable…

  62. Alex Wan June 3, 2012 at 3:00 am #

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

    thanks a lot~

  63. Tom June 5, 2012 at 9:50 pm #

    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.

  64. JP June 15, 2012 at 10:00 am #

    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

  65. dd June 22, 2012 at 7:30 pm #

    Your photos are broken

  66. Lucienmang July 2, 2012 at 1:29 pm #

    Thank so much

  67. Hsm July 6, 2012 at 3:08 pm #

    Greaat job .. thx Christophe

  68. Aakriti August 14, 2012 at 8:30 am #

    hey…
    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..??

  69. Aakriti August 14, 2012 at 9:00 am #

    hey
    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..??

  70. Abdullah Al Mamun August 28, 2012 at 5:43 am #

    Hi,
    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.

    Thanks

  71. Faraz August 28, 2012 at 8:32 am #

    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 ?

  72. Vir J September 4, 2012 at 10:27 am #

    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.

    Regards,
    Vir.

  73. Supriyo September 6, 2012 at 3:57 pm #

    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 …

  74. renux91 September 8, 2012 at 11:16 pm #

    Hi!
    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?!

  75. Nnamdi October 2, 2012 at 4:09 pm #

    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.

  76. Bax October 10, 2012 at 2:08 am #

    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,
    Bax

  77. Rikesh Subedi October 15, 2012 at 12:24 pm #

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

  78. Nitin October 17, 2012 at 1:09 pm #

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

  79. irfan October 19, 2012 at 5:16 pm #

    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
    http://www.retrify.com/what-is-phonegap

  80. Driedoezoe October 28, 2012 at 9:09 am #

    Thanks! Really helped me to get started

  81. John Cardozo October 28, 2012 at 10:08 pm #

    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…

  82. Visitor October 29, 2012 at 8:34 pm #

    Hi,

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

  83. fer December 19, 2012 at 11:00 pm #

    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

  84. snoutz December 21, 2012 at 7:53 am #

    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

  85. Najla December 28, 2012 at 3:36 am #

    thanks.. Very helpful..

  86. Philippe Warnon January 3, 2013 at 9:57 am #

    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 ?
    Thanks.

  87. Chris January 4, 2013 at 8:15 pm #

    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.

  88. tyegah January 5, 2013 at 6:27 pm #

    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.

    Thanks.

  89. mat January 8, 2013 at 2:51 am #

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

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

    • mat January 8, 2013 at 2:51 am #

      Oh i forgot greate Article !!!

  90. James Dang February 6, 2013 at 8:59 pm #

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

  91. James Dang February 7, 2013 at 7:51 pm #

    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?

  92. James Dang February 8, 2013 at 6:59 pm #

    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?

    James

  93. Luis Fernando February 16, 2013 at 2:41 pm #

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

  94. waqar February 19, 2013 at 1:27 pm #

    It’s really very cool :) Thanks for sharing

  95. Diego February 24, 2013 at 1:14 am #

    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!

  96. espresso machines February 24, 2013 at 7:52 am #

    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!

  97. SIddharth March 14, 2013 at 7:58 pm #

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

  98. vignesh March 23, 2013 at 11:12 am #

    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 !!!

  99. Bishal March 26, 2013 at 2:31 am #

    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?

  100. John Durbin April 14, 2013 at 3:27 am #

    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 April 21, 2013 at 2:32 am #

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

  101. Andy April 16, 2013 at 5:21 pm #

    When I go to http://coenraets.org/apps/directory/jqm/index.html using a normal web browser (chrome) nothing appears except for a filter. But no employee list.

  102. DK April 18, 2013 at 9:25 am #

    Your only demo is broken:

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

  103. adika86 May 17, 2013 at 4:26 pm #

    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!

  104. Hai July 10, 2013 at 12:24 am #

    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!

  105. Arif August 1, 2013 at 12:01 am #

    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

  106. Rabiu August 15, 2013 at 4:47 am #

    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

  107. Thierry Otis September 23, 2013 at 5:54 am #

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

  108. Jack December 8, 2013 at 11:22 am #

    Hi,
    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.

  109. coco January 3, 2014 at 7:22 pm #

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

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

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

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

    thanks

  110. Ivan January 10, 2014 at 10:47 am #

    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

  111. Jim January 19, 2014 at 1:52 pm #

    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.

  112. Ted January 20, 2014 at 9:59 am #

    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.

  113. BuddySteve February 5, 2014 at 7:35 pm #

    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?

  114. iPhone App Source Codes March 1, 2014 at 8:29 am #

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

  115. BraunWilliams March 22, 2014 at 2:50 am #

    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

  116. Esercizi per i bambini April 14, 2014 at 10:23 am #

    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.

  117. php outsourcing April 14, 2014 at 11:42 pm #

    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?

  118. free apk game downloads April 21, 2014 at 5:10 pm #

    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.

  119. Vasudev April 24, 2014 at 4:36 am #

    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.

  120. glassware development April 27, 2014 at 9:42 am #

    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.

  121. 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!

  122. google glass app development May 20, 2014 at 4:31 am #

    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

  123. Htmluse May 29, 2014 at 2:58 am #

    Wow very good jqueryplugins …….for you

  124. Fadjar July 18, 2014 at 3:15 am #

    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….
    Fadjar

  125. Shalini October 31, 2014 at 7:28 am #

    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?

Trackbacks/Pingbacks

  1. Why I’m Doing PhoneGap | Ryan Stewart – Mountaineer Coding - October 11, 2011

    [...] be able to talk about it. And I think we’ve done a pretty good job of that. Christophe has a demo app (with source code) up, Greg has a couple of really good posts on it (especially this one that talks about how PhoneGap [...]

  2. Sample App: Mobile jQuery without jQuery Mobile - October 19, 2011

    [...] my previous post, I shared a sample Employee Directory application built with jQuery Mobile. In this post, [...]

  3. jQuery Mobile “Getting Started” Application - November 3, 2011

    [...] couple of weeks ago, I shared an Employee Directory sample application built with jQuery Mobile and PhoneGap. That application was implemented “Ajax-style”, [...]

  4. How to Build Application using jQuery Mobile & PhoneGap | CS5 Design - December 12, 2011

    [...] Coenraets has written a simple application, built using jQuery Mobile and PhoneGap. Even though the application is simple, it covers some [...]

  5. How to Build Application using jQuery Mobile & PhoneGap | uxstats - December 13, 2011

    [...] Coenraets has written a simple application, built using jQuery Mobile and PhoneGap. Even though the application is simple, it covers some [...]

  6. Come costruire un’applicazione usando jQuery Mobile & PhoneGap - sastgroup.com - December 13, 2011

    [...] Link: http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/ [...]

  7. Come costruire un’applicazione usando jQuery Mobile & PhoneGap | buonaguida.com - December 14, 2011

    [...] Link: http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/ [...]

  8. How to Build Application using jQuery Mobile & PhoneGap | PHP Ocean - December 16, 2011

    [...] 16 Christophe Coenraets has written a simple application, built using jQuery Mobile and PhoneGap. Even though the application is simple, it covers some [...]

  9. Using $.each() within $.getJSON - February 26, 2012

    [...] I’m trying to modify the following example app to meet my needs: http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/. [...]

  10. Sviluppare applicazioni dinamiche per mobile | openbrain - March 1, 2012

    [...] La soluzione è utilizzare le informazioni in formato Json. Nell’esempio di questo articolo alcune pagine PHP generano dei Jason intrepretati da jQuery e quindi viene generata (da jQuery) la [...]

  11. 5 ways to learn how to make stuff for fun | Tammy Butow - May 16, 2012

    [...] Makers is a cool example. 3. Set yourself a challenge and tell your friends about it – e.g. I will make a mobile app by by Dec 1 (deadlines are super important!) 4. Make something simple and fun you can share with friends, like [...]

  12. 5 ways to learn how to make stuff for fun | Tammy Butow - May 16, 2012

    [...] Makers is a cool example. 3. Set yourself a challenge and tell your friends about it – e.g. I will make a mobile app by Dec 1 (deadlines are super important!) 4. Make something simple and fun you can share with friends, like [...]

  13. Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes - May 21, 2012

    [...] diving into writing a mobile app with jQuery Mobile/PhoneGap. I’m using this sample template to start from, which uses HTML/JS to create the pages. Rather than have all the <page> tags [...]

  14. Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap | PHP Developer Resource - May 23, 2012

    [...] diving into writing a mobile app with jQuery Mobile/PhoneGap. I’m using this sample template to start from, which uses HTML/JS to create the pages. Rather than have all the <page> tags [...]

  15. Page not found - October 5, 2012

    [...] Sample Application using jQuery Mobile and PhoneGap [...]

  16. Using Backbone.js with jQuery Mobile | Christophe Coenraets - November 16, 2012

    [...] Mobile (jQM) is one option that I’ve explored before (here and here), but it fits more in the category of full-stack frameworks that tie together [...]

  17. Using Backbone.JS with jQuery Mobile | Appliness - December 5, 2012

    [...] Mobile (jQM) is one option that I’ve explored before (here and here), but it fits more in the category of full-stack frameworks that tie together [...]

  18. Helpful Developer Resources - Part 1 « Development AdvantageDevelopment Advantage - December 5, 2012

    [...] http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/ [...]

  19. Create Your First Mobile App with PhoneGap Build – Using the Notification API | Flippin' Awesome - April 29, 2013

    [...] http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/ [...]

  20. Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap - Tech Forum Network - May 29, 2013

    [...] diving into writing a mobile app with jQuery Mobile/PhoneGap. I’m using this sample template to start from, which uses HTML/JS to create the pages. Rather than have all the <page> tags [...]

  21. Un completo ejemplo de Phonegap, jQueryMobile, PHP, MySQL, JSon… | Programación de Dispositivos Móviles - September 11, 2013

    [...] http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/ [...]

  22. Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap | Ask Programming & Technology - November 7, 2013

    [...] diving into writing a mobile app with jQuery Mobile/PhoneGap. I’m using this sample template to start from, which uses HTML/JS to create the pages. Rather than have all the <page> tags [...]

  23. Three great phoneGap tutorials » VC-TEL Team Blog - December 12, 2013

    [...] Application using jQuery Mobile and PhoneGap http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/ (nb. scroll to the end of the article for alternative versions of this [...]

  24. Un completo ejemplo de Phonegap, jQueryMobile, PHP, MySQL, JSon… | Centro Inca - March 28, 2014

    […] http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/ […]

  25. 4 Best PhoneGap Tutorials | Mobile Dev Resources - May 13, 2014

    […] Sample Application using jQuery Mobile and PhoneGap: 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. […]

  26. JQM & Domino Data Service (2) | Kwintessential Notes - May 27, 2014

    […] has multiple layers of data that is common in Notes (multiple forms & views). I followed Christophe Coenraets’s example and re-used it for the fakenames […]

  27. jQuery Mobile “Getting Started” Application | whatabout - September 7, 2014

    […] couple of weeks ago, I shared an Employee Directory sample application built with jQuery Mobile and PhoneGap. That application was implemented “Ajax-style”, keeping […]

Leave a Reply

css.php