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

Comments

  1. Thank you Sunil for nice tutorial, but i am facing some problem in executing the query, will please have a look on this link

    http://stackoverflow.com/questions/23275621/displaying-same-result-again-and-again-in-javascript-phonegap

    And you will get an idea where i am finding the problem.

    Please let me know if you know any solution about it. If you can then it will be a great help.

    Thank you! :)

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. this article is very good thank you, but I'm trying to repeat the example from the documentation, and always gets an error. can you tell me something?

    http://stackoverflow.com/questions/23320205/output-records-from-a-database-phonegap

    ReplyDelete
  4. Hi, the download link is broken kindly provide an alternate one.

    ReplyDelete
  5. Hi, Could you please share source code again? Link is broken

    ReplyDelete
  6. Pls share download link again

    ReplyDelete
  7. Pls share download link again

    ReplyDelete
  8. Cominform is your partner for efficient, custom-tailored business software-solutions. The Cominform team develops on innovative platforms and in line with cutting-edge standards. Here are options for Web Desktop,Web-Desktop, SAML Cordova Plugin , SQL Cordova Plugin , SAML Phonegap Plugin and SQL Phonegap Plugin.

    ReplyDelete
  9. Hello!
    In which path do I have to storage the db file?

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. Hi there! I could have sworn I’ve visited your blog before but after looking at a few of the posts I realized it’s new to me. Anyways, I’m certainly pleased I came across it and I’ll be book-marking it and checking back often!
    Gadgets

    ReplyDelete

Post a Comment

Popular posts from this blog

A Splash Screen for Android using Phonegap

Install The Cordova Plugin through CLI & how to run on android device