Cordova - WebSQL database not working in my phone

Question

I using of the Cordova for create an Android application. I use of the WebSQL database for this project. My codes is:

    function onDeviceReady(){
        var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
        //for create tables and default data records after the project instaling (for first run)
        if (typeof window.localStorage.getItem('firstTime') === 'undefined' || window.localStorage.getItem('firstTime') == null)
        {
            alert('first run');
            db.transaction(populateDB);
            window.localStorage.setItem('firstTime', 0);
        }
        db.transaction(applySetting);
    }
    function populateDB(tx) {
        tx.executeSql('DROP TABLE IF EXISTS setting');
        tx.executeSql('CREATE TABLE IF NOT EXISTS setting (title text, value text)');
        tx.executeSql('insert into setting(title, value) values("font_family", "nazanin")');
        tx.executeSql('insert into setting(title, value) values("font_size", "19")');
        alert('table created');
        return true;
    }
function applySetting(tx)
{
    tx.executeSql('select * from setting where title = "font_family"', [], function(tx, results){
        if(results.rows.length)
        {
            alert(results.rows.length);
            $('.content').css('font-family', results.rows[0].value);
            if($.mobile.activePage.attr('id') == 'setting')
            {
                $('input[name="font-family"]').prop( "checked", false ).checkboxradio( "refresh" );
                $('input#font-' + results.rows[0].value).prop( "checked", true).checkboxradio( "refresh" );
            }
        }
    });

During first run there alerts apear :

1. first run
2. table created

When I want alert one of the records by alert(results.rows[0].value) in Android monitor program this error loged :

Uncaught TypeError: Cannot read property 'value' of undefined

To work with the database requires a special permission in AndroidManifest.xml file?

The AndroidManifest.xml content :

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="com.shia.main" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.Black.NoTitleBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="15" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
</manifest>

In the Chrome browser this project working properly.

Answer 1

A problem might be the asynchronous nature of cordova respectively sqlite queries. The first db.transaction call might not be finished yet. you could give it a try to call applySetting within populateDB and put it within callback of last tx.executeSql call:

function populateDB(tx) {

    tx.executeSql('DROP TABLE IF EXISTS setting');
    tx.executeSql('CREATE TABLE IF NOT EXISTS setting (title text, value text)');

    tx.executeSql('insert into setting(title, value) values("font_family", "nazanin")',[], function(tx, res) {

        tx.executeSql('insert into setting(title, value) values("font_size", "19")',[], function(tx, res) {

           applySetting(tx);

        });

    });

}

I use this plugin and can really still recommend it. And you can find a very similar example(Sample with transaction-level nesting) here Hope this helps.

Furthermore have a look at these statements:

 CREATE TABLE IF NOT EXISTS setting (title text, value text)
 insert into setting(title, value) values("font_family", "nazanin")
 insert into setting(title, value) values("font_size", "19")

They might be working but the attribute name value might be reserved in sqlite and so creating a table that has got a attribute named value might not be able to be created. Did you try to rename them to:

 CREATE TABLE IF NOT EXISTS setting (title text, val text)
 insert into setting(title, val) values("font_family", "nazanin")

Or just use any other name.