CODEWITHSUNDEEP
javascriptangularjssqlitecordovaionic-framework
Chucky
Chucky

Reputation: 75

ng-cordova sqlite plugin: TypeError: Cannot read property 'transaction' of null

I am trying to get values from database using ionic, ng-cordova, sqlite but i keep getting this error:

TypeError: Cannot read property 'transaction' of null: ionic.bundle.js:19387

Here is the code:

HTML

<ion-view view-title="Search" ng-controller="AppCtrl2">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="item in resultados">
        Hello, {{item}}!
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

app.js

var db = null;

angular.module('starter', ['ionic', 'starter.controllers','ngCordova'])

.run(function($ionicPlatform,$cordovaSQLite) {
  $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) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
    db = $cordovaSQLite.openDB({ name: "my.db" });
    $cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS people (id integer primary key, firstname text, lastname text)");
    query = "INSERT INTO people (firstname, lastname) VALUES (?,?)";
    $cordovaSQLite.execute(db, query, ["Sumit", "Pal"]).then(function(res) {
        console.log("INSERT ID -> " + res.insertId);
      });
    $cordovaSQLite.execute(db, query, ["Sumti2", "Pal"]);
  });
})

controller

.controller('AppCtrl2', function($scope,$ionicPlatform,$cordovaSQLite) {

 $ionicPlatform.ready(function() {

    function getCat() {
      var selectQuery = "SELECT * FROM people";
      $cordovaSQLite.execute(db, selectQuery).then(function(result) {
      nombres = []; 
      for(var i=0; i<result.rows.length; i++){
          nombres.push({"nombre":result.rows.item(0).firstname});
        }
      })
    }
    $scope.resultados =  getCat();       
  })

});

How can i fix it ? The error could be of because device is not yet ready ?

Upvotes: 0

Views: 11229

Answers (5)

user7069287
user7069287

Reputation: 11

I found the solution for this,

just declare your variable name above the function in index.js and hence it will load the DB name throughout the controller.

var myDB;
(function() {
    "use strict";

    document.addEventListener('deviceready', onDeviceReady.bind(this), false);

    function onDeviceReady() {

      // Handle the Cordova pause and resume events
      document.addEventListener('pause', onPause.bind(this), false);
      document.addEventListener('resume', onResume.bind(this), false);

      // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
      var element = document.getElementById("deviceready");

      myDB = window.sqlitePlugin.openDatabase({
        name: "mySQLite.db",
        location: 'default'
      });
      element.innerHTML = 'Device Ready';
      element.className += ' ready';
    };
});

In Tutorials they have defined myDB within function

Upvotes: 1

Richard Long
Richard Long

Reputation: 281

$cordovaSQLite.openDB now requires a compulsory location parameter. Change

db = $cordovaSQLite.openDB({ name: "my.db" });

to

db = $cordovaSQLite.openDB({ name: "my.db", location:"default" });

Upvotes: 0

Kooldandy
Kooldandy

Reputation: 565

Do some changes.

  1. Remove database connection from app.run(). Put that code in factory service 

    dbConnection :function(){
    if (window.cordova) {
        dbconn = $cordovaSQLite.openDB({ name: "my.db" , location: 'default'}); 
        $cordovaSQLite.execute(dbconn, "CREATE TABLE IF NOT EXISTS people (id integer primary key, firstname text, lastname text)");
    }
    else{
        dbconn = window.openDatabase("my.db", '1', 'my', 1024 * 1024 * 100);
        $cordovaSQLite.execute(dbconn, "CREATE TABLE IF NOT EXISTS people (id integer primary key, firstname text, lastname text)");
    }
    return dbconn;
}

  2. Call your getCat() function on device ready. 

    document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
   $scope.resultados =  getCat();
}

Upvotes: 0

bocong
bocong

Reputation: 41

You can manually bootstrap the app after the platform is ready Initialize my angularJs App after Phonegap deviceready

Or you can first navigate to a static loading page, once all the initialization logic is complete in the platform ready method, then navigates to the first functional page

Upvotes: 0

Charles Mendes
Charles Mendes

Reputation: 21



Case you do test your app on Browser/Chrome for example, at windows Console (F12) to be error transaction of null, thats ok!!

For good test, you would deploy app ionic any device android or ios, or emulated avd.

Look my test github example ng-cordova sqlite SELECT and INSERT commands, good luck!

https://github.com/CharlesMendes/ionic-sqlite
and
https://github.com/CharlesMendes/comandos-basicos

APP.js

$scope.select = function(lastname) {
        var query = "SELECT firstname, lastname FROM people WHERE lastname = ?";
        $cordovaSQLite.execute(db, query, [lastname]).then(function(res) {
            if(res.rows.length > 0) {
                var message = "SELECTED -> " + res.rows.item(0).firstname + " " + res.rows.item(0).lastname;
                alert(message);
                console.log(message);
            } else {
                alert("No results found");
                console.log("No results found");
            }
        }, function (err) {
            alert(err);
            console.error(err);
        });
    }

Deploy do app Android

ionic build android

Install apk your device/smartphone android for test

adb install -r platforms/android/ant-build/CordovaApp-debug.apk

Upvotes: 2

Related Questions