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.
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!
thank you very much for this explanation,
can’t wait for the next part of this article (php/local db)!
all the best!!!
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
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
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.
thanks for the sample, and let me download the source code.
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.
I should also mention that I CAN get a page to accept the parameter IF I refresh that page.
thanks for the article. does phonegap, jquerymobile work in ios5 using xcode 4.2. i m creating one but $.getJSON method fails..
any ideas?
Does this app work with the iscroll.js like the other example?
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.
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’
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
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.
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?
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
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?
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!
Thanxs, it worked great for me too.
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
weird, had to reboot the iphone, now it works
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;
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.
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
I dont know hindi
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?
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.
Christophe
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.
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.
Christophe
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?
Thanks
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
@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.
Is there a way to make this work without PHP? Can it be done with just HTML and Javascript?
@Scott: Take a look at this post: http://coenraets.org/blog/2011/10/sample-app-using-the-phonegap-database-api/. It’s a similar app using the local database.
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
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!
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.
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.
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.
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
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