Cordova SQLite plugin only works on first call

Question

I have a cordova app with two pages, the first has a search field and the second displays the results of the first. The displayResults function

function displayResults(){
    var query = localStorage.getItem('search');
    var db = window.sqlitePlugin.openDatabase({name:"Store-DB", location: 1});
    queryDB(db,query);
    }

function queryDB(db,query){
    db.transaction(function(tx) {
            var queryList = query.split(" ");
            var sqlText = "SELECT * FROM DB WHERE item LIKE '%"+queryList[0]+"%'";
            for (i = 1; i < queryList.length; i++) {
                    sqlText += " OR item LIKE '%"+queryList[i]+"%'";
            }
            tx.executeSql(sqlText, [], querySuccess);
        }
        );
    }

function querySuccess(tx,results) {
    var i;
    var len = results.rows.length;
    //Iterate through the results
    for (i = 0; i < len; i++) {
        console.log(row);
        //Get the current row
        var row = results.rows.item(i);
        var div = document.createElement("div");
        div.style.background = "gray";
        div.style.color = "white";
        div.innerHTML = row;

        document.body.appendChild(div);
    }
    alert("Finished");
}

Here is the code for the second page:

    <link rel="stylesheet" type="text/css" href="css/default.css">
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script src="js/zepto.js" type="text/javascript"></script>
    <script src="plugins/com.brodysoft.sqlitePlugin/www/SQLitePlugin.js" type="text/javascript"></script>
    <script src="js/code.js" type="text/javascript"></script>
    <script type="text/javascript">
        function onLoad(){
            document.addEventListener("deviceready", onDeviceReady(), false);
        }
        function onDeviceReady(){
            displayResults();
        }
    </script>

    </head>
    <body onload="onLoad()">
        <div id="taskbar">
            <a href="index.html">Home</a>
            <a id="username" class="toolbar_item" style="float:right;"  href="#"></a>
        </div>

The first time you load this page displayResults works just fine, but if you click the link back to the main page and load the second page again the console prints the error ReferenceError: no "undefined" has no property "openDatabase" in other words, the SQLite plugin isn't loading. But, if I make displayResults fire on a button press instead of onload it works every time. What is the explanation for this peculiar behavior?

a reason could be that onload is fired too early before this plugin is loaded fully. I only read about such bug in ionic-framework but this could be a reason as well here. — Blauharley, Mar 13 '15 at 18:22
@Blauharley Yes, that is almost definitely the issue, I knew that, but how do I fix it? I.E. How do I not fire the event until the plugins are loaded? — Devon M, Mar 13 '15 at 18:38
I'm seeing your cordova.js script is above brodysoft-plugin script, it is worth a try to switch their positions. It is recommended to put cordova.js on the bottom of a page-file — Blauharley, Mar 13 '15 at 18:49
Did you try out this answer here?: http://stackoverflow.com/questions/25341826/how-can-i-check-if-cordova-is-ready-if-the-deviceready-event-has-already-fired so settimeout might help. — Blauharley, Mar 13 '15 at 19:27
@Blauharley That worked, mind putting that as the answer so I can accept it? — Devon M, Mar 13 '15 at 19:37

score 1 · Accepted Answer · edited May 23 '17 at 11:51

It seems that sometimes deviceready-event is either not fired at all or fired too early when there are more event handlers of different libraries in place. The second problem caused that the brodysoft-plugin is not loaded properly and assign to the window-object as window.sqlitePlugin property because one event handler dispatched deviceready-event too early. It turned out setTimeout was the answer as it had been here

score 0 · Answer 2 · answered Jul 28 '15 at 22:59

0

You can use the onpageshow event for example

$('#idofyourpage').bind("onpageshow",function(){
   //Do something
});

answered Jul 28 '15 at 22:59

leoLR

462
2
6
21

Cordova SQLite plugin only works on first call

2 Answers2