ionic-team / ng-cordova

OBSOLETE: Please move to Ionic Native https://github.com/ionic-team/ionic-native
https://github.com/ionic-team/ionic-native
MIT License
3.48k stars 1.05k forks source link

TypeError: $window.sqlitePlugin is undefined #398

Open nekulin opened 9 years ago

nekulin commented 9 years ago

I'm doing a project on ionic and try to use sqllite

1) cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin.git 2) app.js

.run(function($ionicPlatform, $cordovaSQLite) {
  $ionicPlatform.ready(function() {
      var db = $cordovaSQLite.openDB({ name: "my.db" }); 

Error TypeError: $window.sqlitePlugin is undefined

index.html

<!-- cordova script (this will be a 404 during development) -->
  <script src="lib/ngCordova/dist/ng-cordova.js"></script>
  <script src="cordova.js"></script>
pbernasconi commented 9 years ago

Try including the sqlite.js file like this:

<script type="text/javascript" src="SQLitePlugin.js"></script>
nekulin commented 9 years ago

Such a file is there and gives a 404

nekulin commented 9 years ago

http://forum.ionicframework.com/t/how-do-i-use-the-ngcordova-sqlite-service-and-the-cordova-sqliteplugin/10383

TonyHenrique commented 9 years ago

Im also having this issue. Just a simple project, added the plugin, ran it on WinRT (Windows 8.1 and my Phone 8.1 device) and this appears on JavaScript Console:

SQLitePlugin openargs: {"name":"my.db"} undefined

ukie commented 9 years ago

For all of you having problems and needing some info, this worked for me using Visual Studio Tools for Apache Cordova (code from my index.html page, inside "head" section).
Note how I am referencing the SQLite plugin, even though in my app folder hierarchy, it sits under , plugins/com.brodysoft.sqlitePlugin/www/

<script src="scripts/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="scripts/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/angular-resource.min.js"></script>
<!--<script src="plugins/com.brodysoft.sqlitePlugin/www/SQLitePlugin.js"></script> - does not work this way-->
<script src="SQLitePlugin.js"></script>

<script type="text/javascript">
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        var db;

        alert("window.cordova: " + window.cordova);
        alert("window.SQLitePlugin: " + window.SQLitePlugin);

        if (window.cordova && window.SQLitePlugin) { // because Cordova is platform specific and doesn't work when you run ionic serve               
            db = window.sqlitePlugin.openDatabase({ "name": "snet1.db" }); //device - SQLite
            alert("device db (SQLite) loaded");
        } else {

            db = window.openDatabase("APSNetMobileDb", "1.0", "snet1.db", 100 * 1024 * 1024); // browser webSql, a fall-back for debugging
            alert("browser db (WebSQL) loaded");
        }

        db.transaction(populateDB, errorCB, successCB);
    }
    function populateDB(tx) {

        tx.executeSql("DROP TABLE IF EXISTS demo");
        //alert("table dropped (if existed)");
        tx.executeSql('CREATE TABLE IF NOT EXISTS demo (id integer primary key unique, data)');
        //alert("table created");
        tx.executeSql('INSERT INTO demo (id, data) VALUES (1, "First row")');
        tx.executeSql("INSERT INTO demo (id, data) VALUES (?,?)", [2, 'Second Row']);
        alert("inserted rows");
        queryDB(tx);
    }
    function queryDB(tx) {
        tx.executeSql("SELECT id, data FROM demo;", [], querySuccess, errorCB);
    }
    function querySuccess(tx, results) {
        var len = results.rows.length;

        for (var i = 0; i < len; i++) { // loop as many times as there are row results
            document.getElementById("output").innerHTML +=
            "<table><tr><td>ID = " + results.rows.item(i).id +
            "</td><td>data = " + results.rows.item(i).data +
            "</td></tr></table>";
        }
    }

    function errorCB() {
        alert("DB access FAILED");
    };
    function successCB() {
        alert("DB access SUCCEEDED");
    };
</script>

<!-- your app's js -->
<script src="scripts/app/app.js"></script>
<script src="scripts/app/controllers.js"></script>
<script src="scripts/app/index.js"></script>
CarolinaKinetic commented 8 years ago

Look at the extension of Raboy's implementation, here: https://gist.github.com/borissondagh/29d1ed19d0df6051c56f

Also, make sure you're using Chrome as your environment; Firefox doesn't support offline SQL (http://stackoverflow.com/questions/11618747/window-opendatabase-throws-typeerror-objectobject-domwindow-has-no-method-op)