Sample App using the PhoneGap Database API

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.

  • Pingback: Sample Application using jQuery Mobile and PhoneGap()

  • Hey Christophe,

    Thanks a ton for the demo app and source code!!

    What IDE did you use to write this application?

    Kind regards,

    Sean

  • Christophe Coenraets

    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.

    • Hermann

      Hi Mr Coenraets !
      I would like firt to thant U for this great tuto.
      I ‘ve learned much with it and I try to follow each step.
      I have a problem but google doesn’t help me.
      My application is about to display a list from mysql data base using ajax and jquery.
      whenever I land on the list.html, I need to refrech the page before I get the data displayed. Is there any way to diplay the list without refresh the page since after the build in phonegap, there won’t be any refrech button.
      Thank for helping the newbie.

    • Guillermo

      Hello Christophe, which folder database and the table is created? I build the project with phonegap create EmployeeDirectoryLocal , copy the www folder, make a preview with Brackets, but does not show anything, just the headers. As I am new to this, I would appreciate if you can help me. Thank You

  • Hi Christophe,

    Ok, great. Thanks for the info! Greatly appreciated!

    Sean

  • Pingback: Sample App using the PhoneGap Database API | industry, blog, iphone, app, creative, games, programming, project, various, criminalminds()

  • Nice Share, It will open a window for the beginners.

  • Xybrek

    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

      • mano

        HI alvin, Did you changed the full phonegap.js file? when i change itto 1.8.0 its not working

        • anudeep

          hi mano,
          i changed the phonegap.js file to cordova-1.5.5 nw its working fine for me…

          • Aniket

            Can you please be a little more specific about the cordova-1.5.5 file? Where can I find it?

      • David

        I checked my phonegap version :
        C:\Projects\Android\PhoneGap\EmployeeDirectoryLocal>phonegap -v
        3.4.0-0.19.18

        which is pretty recent. For recent version of phonegap, there is no more phonegap.js, you have to use cordova.js which is in the www directory instead of www/js directory. Reference to

        then you will be fine. Also, the downloaded zip file missed the pic directory which contains the images for all employees. Copy the pic directory from another Jquery Mobile Example written by the same author then you will be fine. However, when tapping an employee, the detail does not come up. That’s my next problem to solve.

      • David

        I figured out the detail part, if you are using the same phonegap version as mine. PLease change all the reference to js/phonegap.jsp to cordova.js. Another wierd thing is after clicking “View Reports” under James King, the 4 reports just flashed for a short time and it goes into the detail of “Ray Moore”. Pretty weird.

  • Sampath

    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

    • chanakya

      hey have u got ur error resolved…i;m facing the same…..let me know the solution….

    • iphone.developer17@gmail.com

      Have you solved this issue ???
      I am facing same problem !!

  • Upworks

    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

  • Vladimir

    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;

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

  • 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

  • tbrand

    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?

    • Andrew Gscheidle

      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.

      • Sandeep

        Dear Sir/Madam,
        I am a developer from Nepal and I am new to the phonegap. I have been trying to build a application which uses database and I don’t know how to create or embed databse in my app. Please help..

        • What kind of help do you need Sandeep ? If you want to make an mobile app with database, you need to know more about sql,Javascript and JSON / XML

  • Thanks for sharing..
    really Inspiring

  • can we use sqlite for an alternative local storage here?

  • Ralph

    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!

  • Ralph

    I forgot… Also don’t need “Direct Report”.

  • Ralph

    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!

    • agdish

      doesn’t not resolve the problem

  • Pingback: PowenKo > PKML < PhoneGap | PowenKo 柯博文()

  • Celso Soares

    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

    • agdish

      how do you do this

  • The Beast

    The code is not correct… dbCreated is always false and the idea is not like that…

  • agdish

    have some body qet it to work??????????????????????????????????

  • Giancarlo

    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.

    • Ferris G

      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.

      • Javier Vila

        :):):):)
        It´s OK!!!!!!!!!!!!!
        Thanks a lot!

      • OMG! its worked!! THANK YOU SO MUCHHH

      • bryly

        Commenting out the line worked great. Thanks for the tip.

      • shobhit saxena

        Thanx aLot Ferris—-
        Its work for me

    • nono

      Hey, that worked! Thanks a lot!

    • MIGUEL ANGEL, thank you very much!!!

      That worked perfectly! A million thank yous!

    • Debasish

      Its working.. Nice.. Thanks Christophe for this example..

      • Bulos

        Thank you, works perfectly!

  • STeven

    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.

  • Trond

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

  • Valter Vicente

    @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

  • NAveed

    good stuff, keep it up

  • Phonegapfanboy

    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?

  • Pingback: Aplicación de ejemplo usando jQuery Mobile y PhoneGap « desarrollophpsenior()

  • Arivu Selvan

    thanks ……….wonderful work i want more like these sample application.

  • Josbe

    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?

  • Pingback: PhoneGap – migrating iOS applications to Android (Part 1) | Do it yourself Android()

  • hoangduc

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

  • hoangduc

    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

  • Vivek

    How do you add a search filter for this using jquery mobile?

  • Patricio

    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?

  • Geetha

    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.

  • Nandakishore

    Excellent example. Thanks a lot… helped me lot :-)

  • eskanndar

    Do you have a version of Employees apps with offline AND server synchronizable data?

  • Adam

    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!

    • Adam

      I think I figured it out – I had Cordova running, not PhoneGap

  • Argent Ounce

    Thanks for taking the time to make and share this. Very useful!

  • andres

    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?

  • Jiten Oswal

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

  • Carlos Lopez

    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

  • Alex

    What is this App doing? There’s no list, only the Toolbars…?

  • asdd

    wts der to ask

  • vishal

    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

  • Iphony

    Hi Christhphe,

    I am unable to fetch list.
    Headers are appearing but i didn’t find any way to get list !!

  • Pablo

    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

  • Khushboo

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

  • sabrito

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

  • Mahdi

    What is this App doing? There’s no list, only the Toolbars…?

  • José

    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!

  • André

    I wod like to know if you could post an application with these ting and more jquery mobile

  • Kenan

    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

    • Kenan

      Meaning it never saves the data to a local file, and the getEmployees method never get’s executed

  • Berguiga

    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.

  • abayomi

    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.

  • senthil

    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

  • Rui

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

  • Thirion

    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.

    • swedge218

      Best comment ever. a blog post can be made out of that alone. Thanks

      I am yet to try your tricks though as I am chasing a deadline now but my setup is quite close to yours so i hope to get them working easily. I have bookmarked this page cos of this comment.

  • Sydney Van da Seide

    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?

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

  • Goni

    To bring this apps put cordova.js instead of phonegap.js, update yous references in all html files.

  • jecky

    thanks you , tutorial is nice :D

  • Anupama

    Hi Christophe,

    Thank you for sharing this… Its Great!!!!!

  • Hello Man thanks so much for the tutorial i’m sorry if my english is not perfect.
    I have a little question
    when i use the function populateDB() but sending the data with Jquery it’s save good.
    but when i destroy the app and open again the data is lose.

    i use the very same structure that you use in your example.
    may be i’m doing some thing rong. this is my code.

    var db;
    var dbCreated = false;

    document.addEventListener(“deviceready”, onDeviceReady, false);

    function onDeviceReady()
    {
    alert(“Cordova listo!!”);

    $(‘#guardar’).click(function(){
    alert(“llega al clic!!”);
    if($(‘#nombre’).val().length > 0)
    {
    if($(‘#telefono’).val().length > 0)
    {
    db = window.openDatabase(“DataBasePrueba”, “1.0”, “PhoneGap Demo”, 200000);
    db.transaction(populateDB, transaction_error, populateDB_success);
    }
    else
    {
    alert(“Debe ingresar su numero de telefono”);
    }
    }
    else
    {
    alert(‘Debe ingresar su nombre’);
    }
    });
    }

    function transaction_error(tx, error) {
    alert(“Database Error: ” + error + ” tx: ” + tx);
    }

    function populateDB_success() {
    dbCreated = true;
    //db.transaction(getEmployees, transaction_error);
    alert(‘Registro guardado correctamente’);
    }

    function populateDB(tx) {

    //tx.executeSql(‘DROP TABLE IF EXISTS ejemplo’);
    var sql =
    “CREATE TABLE IF NOT EXISTS ejemplo ( “+
    “nombre VARCHAR(50),” +
    “telefono INTEGER(10));”;
    tx.executeSql(sql);

    tx.executeSql(“INSERT INTO ejemplo (nombre,telefono) VALUES (‘”+ $(“#nombre”).val() +”‘,'”+ $(“#telefono”).val() +”‘);”);
    }

  • Mohamed

    Thank you so much for sharing this. I would like to create a dictionary app. Can I use your sample app to achieve my goal?

    Thanks again!

  • sprsrini

    I have my own employees.db created and how to import it into the program ?
    Help will be appreciated.

  • Hola que tal, excelente el tuto… la verdad yo soy nuevo en phonegap y justamente he hecho app en las que creo la base de datos en un .js creando e insertando campos dentro de una tabla y mi consulta es. ¿Como puedo colocar una base de datos sqlite precargada con toda la informacion hecho con sqlitebrowser dentro de mi aplicativo?. por favor me podrias sugerir algo o una pagina que me indice como realizarlo. gracias

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

  • Pingback: Phonegap for Android JSCallback error meaning OnDeviceReady not called | MSDLT Blog()

  • I know this if off topic but I’m looking into
    starting my own blog and was curious what all is needed
    to get setup? I’m assuming having a blog like yours would cost a
    pretty penny? I’m not very internet savvy so I’m not 100% sure.
    Any recommendations or advice would be greatly appreciated.
    Thank you

  • I am extremely inspired together with your writing skills and also with the format for your weblog.

    Is that this a paid subject matter or did you modify it yourself?

    Either way stay up the excellent quality writing, it is uncommon to
    see a great blog like this one these days..

  • Hello it’s me, I am also visiting this web site daily, this web page is actually good and
    the people are genuinely sharing pleasant thoughts.

  • This is my first time pay a visit at here and i am truly pleassant
    to read everthing at alone place.

  • hello!,I really like your writing so much! proportion we be
    in contact extra approximately your post on AOL? I require a specialist in this
    house to unravel my problem. May be that’s you! Having a look ahead to peer you.

  • Kyle

    Hi, I tried running the app both through a web browser on my PC and also after building it with phonegap on my android. Both times none of the images appeared on screen only the headers.

  • When I initially commented I seem to have clicked on the -Notify me when new comments are added- checkbox and from now on each time a comment is added I recieve four emails with the exact same comment. Perhaps there is a means you are able to remove me from that service? Many thanks!

  • James Wong is the Co-Founder and CEO of Avidian Technologies.
    They have made the switching of calls faster wnile providing
    all the facilities of conventional phones like calling, messaging and even fax.

    Additional features add a few seconds on to the printing time.

  • vinay

    which db can we use

  • vinay

    which database can we use

  • Thanks :)

    But, i am still confused how to connect sqlite file (db) to phonegap. Please help ;)

  • Thiago S

    I’m newbie in PhoneGap, I’d like to know how can I add this project to Eclipse??

  • Hi ,
    I have downloaded your sample code and created phone-gap build. but its not showing me any data. Could you please help me ??

    Thanks
    Gaurav

  • Hello. i have downloaded the source code provided in the post link ans trying to execute it with eclipse phonegap …i am able to build the application sucessfully .now i am trying to run it on emulator but the very weird issue that i am facing is that only first two headers ie employee directory and employeelist is visible in my emulator and in browser too.i am not able to load data inside…plz help me ..i do not have other medium to test except emulator…

  • Good jop good blocks

  • Steve

    Many thanks for the great example code and many thanks to the commenters who have helped the rest of us update it for newer phonegap builds

    IF YOU ARE ONLY SEEING A HEADER BAR:

    Read the comments! Someone has already encountered and solved this problem for you. Simply copy in your current cordova.js file (it gets created when you make a new cordova or phonegap project) into the /js folder, and then open the three .html files in the example and change every reference to ‘phonegap.js’ to ‘cordova.js’

  • TECHKER

    So the app works but noting in database?and were do we add employees??

  • Ashik

    I tried this example on andriod phone, and not getting the list. I checked the js code and could know that its not coming the control to onDeviceReady().

    Any one can help me out !

    • Siti Hajar Mohd Termzii

      Please view the answer posted by:MIGUEL ANGEL (4 years ago)

      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!

  • Andrea Vargas

    Hello!
    This post is really great

    I do de IPA file and with ifunbox a try install on Iphone but it’s doesn´t work someone has any idea or somene can help me?

  • Could you please help me on this.

  • On the detail page

  • great job

  • I have App in Phonegap in the app i use my MONGODB with API key now i create a website in wordpress now i want my app connect with wordpress database . How can i do this pls help me

  • Asim

    Hi,

    very nice. I’m little bit confused that How I can install sqlite with my app on device at first time. Please guide me.

    Thanks & Best Regards

  • Great work nice blogs ;=)

  • çok başarılı

  • Formalarımızda kullandığımız kumaş; birinci sınıf mikro-interlok olup; esnek-fit, anti-bakteriyel, termo-balans ve hemen kuruma özelliğine sahiptir.

  • quality, mass production and fair prices

  • Jonathan

    NOT WORKING.. -.-

  • CorAnt

    Thank You Sir,

    Wasted almost 2 days chasing information on how to use SQL correctly in phoneGap. This tutorial is the only things that worked. I needed to make one alteration which was to swap the phonegap.js file for cordova.js

    I can now build on this info and improve my app dev –

    Cheers!

css.php