Ionic view app and Sqlite db is not working

I have created a test app that uses sqlite db and uploaded to ionic view app. When I invoke it from ionic view app, it simply displays the index.html but does not show the alerts that I put in. It works alright with webSql in chrome on my desktop.

Does Sqlite plugin work within Ionic View App? @mhartington

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane ng-controller="ctrl">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
      </ion-content>
    </ion-pane>
  </body>
</html>

my app.js:

var db = null;
angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

  });
})
.controller('ctrl', function($scope, $ionicPlatform) {
  $ionicPlatform.ready(function() {
    db = window.sqlitePlugin.openDatabase({name: "vp.db", location: 0});
    //db = window.openDatabase("vp.db", '1.0', 'vp', -1)
    db.transaction(function(tx) {
      tx.executeSql("CREATE TABLE IF NOT EXISTS test_table (data text, data_num int)");

      alert("test_table created");

      var query = "INSERT INTO test_table (data, data_num) VALUES (?,?)";

      tx.executeSql(query, ["test", 100],
        function(res) {
          alert("insertId: " + JSON.stringify(res));
        },
        function (err) {
          alert(err);
        }
      );
    });
  });
});

Thanks.

1 Like

Hmm, It should support the sql plugin, maybe @tim would be able to help here?
If not, you could always file an issue here
https://github.com/driftyco/ionic-view-issues/issues

Add an issue on github: #52

Maybe related: #49

Is there any update on this? I’m also experiencing this issue with pouchDB

I have a feeling this is caused by the fact that ionic.Platform.ready fires immediately because the device is already loaded.

The problem is that not all plugins have loaded yet. Instead of using ionic.Platform.ready, try wrapping your sqlite calls in a $timeout.

This will be addressed in a future release.

1 Like

Could you give an example of this?

Hello,

Its already fixed or not?

Hello,

I have the same issue, do you have an update about this ?

hey tim,
I have done the following test:

    $timeout(function() {
      console.log(window.sqlitePlugin);
    }, 1000);

    $timeout(function() {
      console.log(window.sqlitePlugin);
    }, 2000);

    $timeout(function() {
      console.log(window.sqlitePlugin);
    }, 3000);

    $timeout(function() {
      console.log(window.sqlitePlugin);
    }, 4000);

    $timeout(function() {
      console.log(window.sqlitePlugin);
    }, 5000);

and looks like it says that is undefined the first two seconds. After that, the plugin is available.

initializing the table with websql ( window.openDatabase(DB_CONFIG.name, ‘1.0’, ‘database’, -1) ) works right and instantly in the ionic view app.

Take a look at https://github.com/driftyco/ionic-view-issues/issues/52#issuecomment-99250866, you can trick View into waiting for Cordova even though it hasn’t loaded yet by setting window.phonegap = {}. Then $ionicPlatform.ready callbacks should wait until plugins are ready before executing and you won’t have to wrap everything in timeouts.

Hi tim,
if you do that, the tests on ionic serve --lab never fires the ready event.

Cordova plugins are not properly loaded under Ionic View being the reason why SQLite plugin doesnt work.

For a 100% sample of an APP working with a pre-populated database, you can have a look at it here: http://codecanyon.net/item/quizionic-a-quiz-app-template-for-ionic-framework-with-sqlite-database/14205904