This is the third version of my Employee Directory application. The jQuery Mobile and the Mobile jQuery without jQuery Mobile versions both used JSON services to get data from a remote server. In this version, the application gets data from a local database using the PhoneGap database API. As a result, this version can work offline which is probably what you would expect for this type of application.
Source code
You can download the source code here.
The database is created when you start your application. The SQL statements to create and populate the database are in employeelist.js. In a real life application, you would want to abstract that a little more.
Hey Christophe,
Thanks a ton for the demo app and source code!!
What IDE did you use to write this application?
Kind regards,
Sean
Hi Sean,
I used Xcode in this case, mostly to be able to quickly test on iOS devices.
Christophe
but when i put this files in the www directory,it does not load the images. it only works when am on internet and the url is set to point to your site. what steps can i follow in order to make it run locally-offline. may be there is a step that i dont know.
Hi Christophe,
Ok, great. Thanks for the info! Greatly appreciated!
Sean
Nice Share, It will open a window for the beginners.
I wonder why when I load this on my phonegap android project (Froyo) the list does not show up, only the header bars. Am I missing something?
Hi Xybreak, I have solved the question. You have to check with your phonegap version. I am using phonegap 1.6.1, the file “phonegap.js” mentioned inside this example is no longer exist. So please check the
to
HI alvin, Did you changed the full phonegap.js file? when i change itto 1.8.0 its not working
hi mano,
i changed the phonegap.js file to cordova-1.5.5 nw its working fine for me…
Hi Christophe,
Iam new to Phonegap and jquery.Thanks for the demo app, this will help me get started.But when I load this on my phonegap android project (Froyo) the list does not show up, only the header bars.Could you please help me on this.
Thanks,
Sampath
hey have u got ur error resolved…i;m facing the same…..let me know the solution….
Have you solved this issue ???
I am facing same problem !!
Hi Christophe, Are you using a build script to minify and package the www folder in the examples?
Hi Chris,
Any chance of a step-by-step article / tutorial on this. I am a complete noobie to app development.
Thanks
Trying to build in MacSO lion for iOS and got the following error:
/Users/tomato_elephant/Documents/DW_NAF/PhoneGapLib/Classes/Camera.m:178:13: error: type of property ‘returnType’ (‘unsigned int’) does not match type of ivar ‘returnType’ (‘enum DestinationType’) [3]
@synthesize returnType;
^
/Users/tomato_elephant/Documents/DW_NAF/PhoneGapLib/Classes/Camera.h:25:23: note: ivar is declared here [3]
enum DestinationType returnType;
Same error here since I downloaded the new SDK and upgraded to Phonegap 1.2 (I’m using Dreamweaver CS5.5 to build)
error: type of property ‘returnType’ (‘unsigned int’) does not match type of ivar ‘returnType’ (‘enum DestinationType’) [3]
@synthesize returnType;
^
/Users/tomdevlin/Documents/DW_NAF/PhoneGapLib/Classes/Camera.h:25:23: note: ivar is declared here [3]
enum DestinationType returnType;
^
1 error generated.
like Tom :
Same error here since I downloaded the new SDK and upgraded to Phonegap 1.2 (I’m using Dreamweaver CS5.5 to build)
error: type of property ‘returnType’ (‘unsigned int’) does not match type of ivar ‘returnType’ (‘enum DestinationType’) [3]
@synthesize returnType;
^
/Users/tomdevlin/Documents/DW_NAF/PhoneGapLib/Classes/Camera.h:25:23: note: ivar is declared here [3]
enum DestinationType returnType;
^
1 error generated.
but no error if i compile and simulate from xcode and phonegap… only in DW… so the android compilation dont have error to.. only with IOS
Thanks for a successful application. The best iPhone applications http://www.ntvmsnbc.com/id/25016381/
I have same error.. can anybody fix that.. thanks for reply
Hello. I am also getting this same error using Dreamweaver 5.5 to build.
error: type of property ‘returnType’ (‘unsigned int’) does not match type of ivar ‘returnType’ (‘enum DestinationType’) [3]
@synthesize returnType;
^
/Users/name/Documents/DW_NAF/PhoneGapLib/Classes/Camera.h:25:23: note: ivar is declared here [3]
enum DestinationType returnType;
^
1 error generated.
Anyone figure this one out yet?
I fixed the above error by opening the class mentioned, finding the var declaration mentioned, and adding “enum” prefix before it. Compiled then without errors.
Thanks for sharing..
really Inspiring
can we use sqlite for an alternative local storage here?
Dear Christophe. Thanks a lot for this great stuff. Exactly what I needed and could not find in the jqm forum.
Now, I want to do my own data driven application but simpler. But I am struggling…
My application has only a link list and a detail-page. So I don’t need the count bubbles in the list. On the detail page, I also don’t need the link “View Manager”.
How can I remove those two functions:
“from species e left join species r on r.managerId = e.id ” +
and
” + species.reportCount + ‘‘);
(in employeelist.js)?
Thanks in advance for your support!
I forgot… Also don’t need “Direct Report”.
And another question…
From where does reportCount get the number? John Williams reports to Paula Gates, Paul Jones and Steven Wells. In the database is only an entry for the Manager. Where is the information stored to who the person has to report (if applicable)?
Thanks Christophe! This example is awesome. I’ve decided to learn some new skills, and I think it’s easiest to dig into code and figure out how it works. I’ve figured out pretty much everything, except the getEmployee(tx) function. I’m wondering if you would mind walking through what it’s doing?
I’m assuming they are variable containers, but I’m confused by why they use “e” instead of “employee” (i.e. e.firstName instead of employee.firstName)
Thanks again! It’s been fun playing around with this.
So I looked at this a bit more and I figured it out, but is there a reason why you don’t just run the SELECT FROM GROUP BY ORDER BY commands directly in the tx.executeSql string?
i.e. tx.executeSql(SELECT * FROM employee ORDER BY etc, [], getEmployee_success);
To everyone having problems getting it running on Android, this app comes with the iOS version of PhoneGap – you need to swap js/phonegap.js for the Android version to get it to run correctly.
Thanks for the code Christophe!
doesn’t not resolve the problem
Thanks for sharing this app! Please keep them phonegap apps and demos coming!
I’ve got mapkit covered, so maybe something that uses the camera?
I just changed jQuery with zepto.js and it works perfect. I think it works even faster than jquery.
Lp. Silvester
An odd behavior, it works fine on android 2.3 but not in 2.1. There are some differences in the sql, because of the join you loose data in android 2.1. But I have no idea where to look on android documentation for changes in DB.
Lp. Silvester
Again me, sorted out what’s wrong. In this way it is backwards compatiple with Android 2.1.
Change the sql’s ex.:
var sql = “select e.id id, e.firstName firstName, e.lastName lastName, e.title title, e.picture picture, count(r.id) reportCount ” + “from employee e left join employee r on r.managerId = e.id ” + “group by e.id order by e.lastName, e.firstName”;
Lp. Silvester
how do you do this
The code is not correct… dbCreated is always false and the idea is not like that…
have some body qet it to work??????????????????????????????????
It’s possible mix your 2 sample (database and json) for create an app that:
load json in background and populate db.
In this way, the application would work both online and offline
thanks for sharing, i have same problem
Hi everybody, I could fix it. The problem is the event document.addEventListener for “deviceready” doesn’t fire. I tried fix it with new “Cordova” Phonegap but it was a waste of time.
To fix it, you can remove every “document.addEventListener(“deviceready”, onDeviceReady, false)” line in employeedetails.js, employeelist.js and reportlist.js files; and add after a onDeviceReady(); (or even a setTimeOut):
//document.addEventListener(“deviceready”, onDeviceReady, false);
onDeviceReady(); // <== Fixed line!
Thank you to Christofe por his awesome job and his Web.
For running it on the desktop (I ran it on my Safari/Mac), I changed the above line (mentioned by MIGUEL ANGEL) to:
$(document).ready(function() { onDeviceReady(); });
Since there’s no Phoegap.js file for mac, I did not swap the phonegap.js file. I assumed since the functionality used is simply the storage (no camera, etc..), it should work fine using the phonegap.js for iOS which Christophe included, and it sure did work.
:):):):)
It´s OK!!!!!!!!!!!!!
Thanks a lot!
OMG! its worked!! THANK YOU SO MUCHHH
Hey, that worked! Thanks a lot!
Grea8 Stuff, your tutorial are so detailed and i like the evolution, perfect for beginners. Big Thank’s
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.
Hi! I got some problems with my app using eclipse on windows. I have changed the phonegap.js to android version, and I get the program running. The problem is when I click on any of the employees, I get the following error message: “A network error has occured (file: ///android_asset/www/employeedetails.html?id=10)”
Anybody got a solution for that?
I just pasted the whole project from a guy that runs eclipse on mac, and he doesn’t have this problem….
@Christophe – Thanks for all the code and the effort! You rock!
@Andrew Briggs – Thanks for make me realize that I needed to switch the js from iPhone to the Android one, to make it work!
@Miguel Angel – That was the final working code to make all this work. Thanks!
Can you please do a video screen cast explaining .js files and and how to integrate into Database for a beginner? Thanks
good stuff, keep it up
Great job, Chris. A question regarding the DB design. It seems that every time this application starts, the database will be re-created, right? In real life, you don’t want to do that but keep a static DB and just to initialize it once. What is your best practice for this?
thanks ……….wonderful work i want more like these sample application.
Could you post a tutorial how to combine these json and db apps in orded to make an app that loads the data from external server and populates database with that data. I would want to make an app that works both offline and online?
hi.
when I click on any of the employees, I get the following error message: “A network error has occured (file: ///android_asset/www/employeedetails.html?id=7)”
hi.
when I click on any of the employees, I get the following error message: “A network error has occured (file: ///android_asset/www/employeedetails.html?id=17)”
Hi Christhphe,
Thank you for sharing it. Helped a lot. :)
Regards
Akshay
How do you add a search filter for this using jquery mobile?
I have the same problem when i click any of the employees.
Any solution to the “A network error has occured (file: ///android_asset/www/employeedetails.html?id=7)” problem?
Hi,how the employee details from local database is working,for me i can see only 2 bars,one is showing title like Employee Directory and another is showing Employee List.Help is appreciated.
Excellent example. Thanks a lot… helped me lot :-)
Do you have a version of Employees apps with offline AND server synchronizable data?
Hi,
This is awesome! Thanks for sharing.
I downloaded the files and want to try and get it set up on my machine so I can play and learn. However, when I run it in the simulator I only get the word ‘Employee List’ appearing – no javascript or any other data. Was wondering if you could help me out?
Thanks!
I think I figured it out – I had Cordova running, not PhoneGap
Thanks for taking the time to make and share this. Very useful!
please help i have this error i dont know how to fix it
Error: executing module function ‘setInfo’ in module ‘cordova/plugin/ios/device’. Have you included the iOS version of the cordova-1.7.0.js file?
The app is not working. I guess there have been alot of changes in phonegap since the time this app was made. Author please update the post or please remove it .. bcoz people are getting stuck here and we dont even know how to fix them .. everyone is stuck half way. :(
I am proving it in an Android (Galaxy II) and it does not generate the database, actually when I use the file phonegap.js me there does not work the application, the version of the web services if that me works well. For that it can be? Thank you
What is this App doing? There’s no list, only the Toolbars…?
wts der to ask
I have taken the sample and using it…but it is only listing employee ..when i click on employee it gives me error network error occured file:///android_asset/www/emplyeedetails.html?id=10
Hi Christhphe,
I am unable to fetch list.
Headers are appearing but i didn’t find any way to get list !!
Hello
I am developing an application on PhoneGap and will have access to databases. I wanted to know how to handle the maximum size allowed for the database and if there is any better alternative?
thanks
Hello..m using da code for android.. but there is error in jquery.js file.. Plz tel how to resolve it..
Thanks a lot it worked for me.. I never knew even I could make apps :)
hello,
i’m a beginner with (Html5 and js). I’m trynig to test this application with Visual Studio 2010 and PhoneGap 2.0 and when I execute this the list does not show up, only the header bars. Am I missing something? how can i know if Db was created ???
What is this App doing? There’s no list, only the Toolbars…?
Hola, muy interesante tu aplicación, quisiera saber si tienes algún manual o que me recomiendas para poder hacer la conexión a base de datos remota desde una aplicación nativa para móviles
please, can you share the database?
is this only work on iPhone?
Hi!! Thank you very much for this interesting tutorial. I am new to develping apps using Phonegap. I just have one question. When it comes to populating the db with populateDB(), is there a way in which you can tell the app to sync it’s data with that of a remote database? How can you tell if the table exists and then you call another function that fetches this data? Thank you!
I wod like to know if you could post an application with these ting and more jquery mobile
Why does the application populate the database every time i turn off the simulator?
I am using iOS simulator 5.1 with Xcode 4.5 and phonegap 2.1.0
Meaning it never saves the data to a local file, and the getEmployees method never get’s executed
My problem display on dreamweaver occur android emulator but I do not list the use
The database calls were useful to me. Learning about PhoneGap is proving to be a challenge.
Hello there.I pray someone out there respond to my comment urgently.This is an urgent SOS. Thank you for your blog and for taking out time to impact knowledge.However,I appreciate your employee directory with phone gap api for local storage-it has helped in my understanding of the subject.I came accross a problem recently cos I was trying to insert into my database in my local language with this text(Odò kan si ti Edeni ṣàn wá lati rin ọgbà na; lati ibẹ̀ li o gbé yà, o si di ipa ori mẹrin. ) but on display the result after select query gave was different(Odò kan si ti Edeni ṣà n wá lati rin á»gbà n…).Can you help.How do I get the exact text I inserted in the database.
Code doesn’t work for me with iOS 6. I just get the Employee Directory header and Employee List title, no results. I’m using the Phonegap build service, which should correctly generate the version of phonegap.js. Code must be out dated already.
Thanks for posting the source code for phonegap. It is not working for me for Android, when run I get this error:
10-30 16:44:09.390: E/Web Console(638): Uncaught ReferenceError: cordova is not defined at null:1
Please help.
Senthil
congrats for the source code… i´m new to phonegap, i supose you´re using Sqlite database right? im kinda struggling trying to find a way to use a sqlite database, i now that we can access database with phonegap plugin, but can you provide some info about the you did that, did you use localstorage or somthing?´
Thanks!
How db will work .. for me it works but no data is there just theme showing .. please can you tell me how to show the data…
karakoki thnakss
thank you so much
Hi, Thanks this is just what i need but i downloaded the project and it doesnt have an xcode project to run it is just the html, css and javascript files, im still a noob on phonegap so is probably something silly but i would apprecieate the help!
thanks from heart, what examples you have given can i use for commercial..
Nice Demo !!! thanks a lot :D
Looking for more knowlege in phonegap. Which is best and affordable option for accepting payment.
This is for the people for whom “onDeviceReady” doesn’t get executed. Its most probably because you are using different versions of Phonegap and Cordova. The project uses cordova 1.1 while the latest Phonegap and Cordova version is 2.5. So, most of you guys will be testing this app on 2.5. Here’s how to fix it:
Replace www/js/phonegap.js with the cordova-VERSION.js, where VERSION is your phonegap’s version.
Good Tutorial thank you so much..
To get this working properly, I had to do the following:
Install Android SDK
Download Cordova 2.6.0 (I used the prebuilt PhoneGap download of same version)
Install Chrome browser.
Install Ripple Emulator inside the chrome browser. (from chrome web store)
Install NetBeans 7.3
Install AndroidNB plugin for NetBeans (http://www.nbandroid.org)
I used Cordova command line to create initial project.
Copy the source from this demo project into the ‘www’ folder.
Use NetBeans to create an HTML5 project from existing sources and use the www folder as the Site Root. I rename the project from ‘assets’ to something more relevant while keeping the project directory as ‘assets’.
What this gives me is an environment where I can run and debug the web portion of the app in Chrome with the NetBeans debugger attached. (click on www folder and then Run)
This allows me to set breakpoints in the javascript files in NetBeans. When the browser execution gets to the breakpoint, control is transferred to NetBeans where you can inspect the values of variables, step through code etc.
If you enable the Ripple Emulator for the site, you will see a phone skin which you can rotate, shake, emulate gps co-ordinates etc. The example of this demo app works as is if you set the Cordova version to 1.0.0 in Ripple.
If you click on the project root inside NetBeans and click Run, it will be seen as an Android project and allow you to run it on an Android Virtual Device, or an actual phone that’s plugged in via USB.
Normally NetBeans will show an Icon for Web app projects, but since I nested an HTML5 project inside an Android project, and opened the Android project in NetBeans, we only see the Android Icon on the project root, and not the HTML5 icon on the www folder as well. To see the HTML5 icon for the embedded web project, click on the Files tab.
I removed the phonegap js file and replaced it with Cordova-2.6.0.js file and changed all references. Now you can change the Cordova version in the Ripple Emulator to 2.0.0.
If you run this in the browser without ripple, then some of the comments above allow the onDeviceReady to be called by replacing
document.addEventListener(“deviceready”, onDeviceReady, false);
with:
$(document).ready(function() {
onDeviceReady();
}
BUT with the ripple emulator enabled, that is not necessary. It actually gives other errors when using an actual phone. When document ready function is called, Cordova isn’t loaded yet, so creating the db connection fails.
To get it to work in the browser with or without an emulator and on an actual device, you can use this:
$(document).ready(function() {
// are we running in native app or in browser?
window.isPhone = false;
if(document.URL.indexOf(“http://”) === -1) {
window.isPhone = true;
}
if(window.isPhone) {
//alert(‘isPhone’);
document.addEventListener(“deviceready”, onDeviceReady, false);
} else {
//alert(‘isBrowser’);
onDeviceReady();
}
});
NOTE: when using chrome without the emulator, onDeviceReady gets called once (with isBrowser alert if not commented out). When using the emulator, it gets called twice. I assume that’s because the emulator calls the document ready function as well. When running on a physical device, it only gets called once (with alert isPhone if not commented out).
One other thing that I’ve realized is that the db.transaction method that takes a success condition is fired concurrently with the db.transaction! So to get it to work I changed:
db.transaction(populateDB, transaction_error, populateDB_success);
inside employeelist.js to just be:
db.transaction(populateDB, transaction_error);
and then added this to the end of the populateDB(tx) function:
populateDB_success();
I don’t know how to add an attachment here, otherwise I’ll be happy to give anyone the zip of my project folder.
Hope it helps anyone who is also getting started with HTML5, Android and Cordova.
Hey guys,
i downloaded the example for phonegap with the local database.
If i try to test the sample with phonegap build the application starts but the local database was not create. I test it on android devices.
Have anybody an idea how it works correctly?