Getting data from db and show in listview in Android Apache Cordova

Hello everyone,

In this article I am trying to insert some data in sqlite table and get the same data from table and want to show in list-view of android in cordova (formality name PhoneGap).

You know all, Sqlite is the database that android device provide optional for us. We can store  a lot of data inside the sqlite database.
PhoneGap makes it pretty darn easy to create and work with a database in your application. For this we have to create the database name and version and in phonegap it stored inside the data/data/package name/files_01/000000001.db.
For the UI design jquery mobile provide the outstanding UI as for drag and drop. 

CordovaListview.java

package com.sunil.listview;

import android.os.Bundle;
import org.apache.cordova.*;

public class CordovaListview extends CordovaActivity 
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.init();
        // Set by  in config.xml
        super.loadUrl(Config.getStartUrl());
        //super.loadUrl("file:///android_asset/www/index.html")
    }
}

databasehelper.js

    function dbConnect(){
     var db = window.openDatabase("MyFriends", "1.0", "myfriends", 200000); 
        db.transaction(populateDB, errorCB, successCB);
    }
 
    //create table and insert some record
    function populateDB(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS MyFriends (id INTEGER PRIMARY KEY AUTOINCREMENT, Name TEXT NOT NULL, Nickname TEXT NOT NULL)');
        tx.executeSql('INSERT INTO MyFriends(Name,Nickname) VALUES ("Sunil Gupta", "android")');
        tx.executeSql('INSERT INTO MyFriends(Name,Nickname) VALUES ("Abhishek Tripathi", "Champoo")');
  tx.executeSql('INSERT INTO MyFriends(Name,Nickname) VALUES ("Sandeep Pal", "kaliya sandy")');
  tx.executeSql('INSERT INTO MyFriends(Name,Nickname) VALUES ("AmitVerma", "Budhiya")');
    }
 
    //function will be called when an error occurred
    function errorCB(err) {
        alert("Error processing SQL: "+err.code);
    }
 
    //function will be called when process succeed
    function successCB() {
        alert("success!");
  var db = window.openDatabase("MyFriends", "1.0", "myfriends", 200000); 
        db.transaction(queryDB,errorCB);
    }
 
    //select all from MyFriends
    function queryDB(tx){
        tx.executeSql('SELECT * FROM MyFriends',[],querySuccess,errorCB);
    }
 
    function querySuccess(tx,result){
        $('#MyFriendsList').empty();
        $.each(result.rows,function(index){
            var row = result.rows.item(index);
            $('#MyFriendsList').append('
< li>< a href=" #">< h3 class="ui-li-heading">'+row['Name']+'< /h3>< div class="ui-li-desc">Club '+row['Nickname']+'< /div>< /a>< /li>
');
        });
 
        $('#MyFriendsList').listview();
    }

listview.html

< !DOCTYPE html>
< html>
< head>
< title>Page Title< /title>


< link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
< script type="text/javascript" src="cordova.js">< /script>
< script type="text/javascript" src="js/databasehelper.js">< /script>
< script type="text/javascript" src="js/jquery.js">< /script>
< script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js">< /script>
< /head>
< body onload="dbConnect();";>
 
< div data-role="page">
  < div data-role="header" data-position="fixed" data-theme="b">
    < h1>My friends< /h1>
  < /div>
  < div data-role="content">
     < ul id="MyFriendsList">
    < /ul>
  < /div>
< /div>

< /body>
< /html>

 You can download the source code ListviewCordova