Question

I am new to android phonegap. i am storing and retrieving data using native application. i dont know how to display the retrieved data from native to phonegap(HTML)page.

can anyone pls guide me how to access sqlite with phonegap.?

Thanks in advance.

Answer 1

You need to first create a Android plugin for Phonegap through which you will be able to access the native code and hence the native DB like this

public class SqlitePlugin extends Plugin {

private static final String TAG = "SqlitePlugin";
private static final String CREATE_DB_ACTION = "createDatabase";
private static final String SHOW_DB_VALUES_ACTION = "showValues";

@Override
public PluginResult execute(String action, JSONArray data, String callbackId) {
    Log.i(TAG, "Plugin Called");
    PluginResult result = null;

    if (CREATE_DB_ACTION.equals(action)) {
        Log.d(TAG, "CREATE_DB_ACTION");
        DB _db = new DB(ctx);
        _db.insertValues();
    }
    else if (SHOW_DB_VALUES_ACTION.equals(action)) {
        Log.d(TAG, "SHOW_DB_VALUES_ACTION");

        JSONObject DBInfo = null;
        try {
            DBInfo = getDBValuesListing();

        } catch (JSONException e) {
            e.printStackTrace();
        }

        result = new PluginResult(Status.OK, DBInfo);

    }       
    else {
        result = new PluginResult(Status.INVALID_ACTION);
        Log.d(TAG, "Invalid action : " + action + " passed");
    }

    return result;
  }
}

After that Create a sqlite.js file like this

    function SqlitePlugin() {
};

SqlitePlugin.prototype.createDatabase = function(successCallback, failCallback) {

return PhoneGap.exec(successCallback, failCallback, "SqlitePlugin",
        "createDatabase", [ null ]);
};

SqlitePlugin.prototype.showValues = function(params, successCallback, failCallback) {
return PhoneGap.exec(successCallback, failCallback, 'SqlitePlugin', 'showValues',
        [ params ]);
};

PhoneGap.addConstructor(function() {
PhoneGap.addPlugin("SqlitePlugin", new SqlitePlugin());
});

Import this sqlite.js in your page(index.html) and then finally use the plugin like this

function showValues() {
    window.plugins.SqlitePlugin.showValues('showValues',
            showValuesSuccessCallBack, showValuesFailCallBack);

}
function showValuesSuccessCallBack(e) {
    if (e.Rows.length > 0) {
        alert("Success");
        for (i = 0; i < e.Rows.length; i++) {
            alert("Id = " + e.Rows[i].id);
            alert("Number = " + e.Rows[i].number);
        }
    } else {
        alert("No values in Database");
    }
}

function showValuesFailCallBack(f) {
    alert("Failure");
}

Let me know if this worked out for you