SQLite Database for Ionic

Question

I am having trouble doing CRUD operations in SQLiteDatabase in ionic framework. This is my main "index.html" page, where I am displaying my div by replacing another div using "replaceWith()", which I learned recently!

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

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script>
$(document).ready(function(){
    $("#insertbtn").click(function(){
        $(".toshow").replaceWith('<div class="toshow" ng-controller="MyController">\
          <div class="list">\
          <label class="item item-input">\
            <input type="text" placeholder="Full Name" ng-model="fullname">\
          </label>\
          <label class="item item-input">\
            <input type="text" placeholder="Address" ng-model="address">\
          </label>\
          <label class="item item-input">\
            <input type="text" placeholder="Email" ng-model="email">\
          </label>\
          <label class="item item-input">\
            <input type="number" placeholder="Age" ng-model="age">\
          </label>\
          <label class="item item-input">\
            <input type="password" placeholder="Password" ng-model="password">\
          </label>\
          <label class="item item-input">\
            <textarea placeholder="Details" ng-model="details"></textarea>\
          </label>\
          <br /><button class="button button-outline button-positive" ng-click="insert(fullname, address, email, age, password, details)">INSERT</button>\
          </div><p>{{ statusMessage }}</p>\
        </div>');
    });

});
</script>

Now here, in this replaced div, I add some values and want to insert that into the SQLite Database!

And this is my app.js file:

    var db=null;
    angular.module('starter', ['ionic', 'ngCordova'])
    .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
         if (window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
          cordova.plugins.Keyboard.disableScroll(true);
        }
        if (window.StatusBar) {
          StatusBar.styleDefault();
        }

        db = $cordovaSQLite.openDB("sample.db");
        $cordovaSQLite.execute(db, 'CREATE TABLE IF NOT EXISTS User(id INTEGER PRIMARY KEY AUTOINCREMENT, fullname TEXT, address TEXT,email TEXT, age INTEGER, password TEXT, details TEXT)');
            });
    })

    .controller('MyController', function($scope, $cordovaSQLite) {
    $scope.insert = function(fullname, address, email, age, password, details) {
    $cordovaSQLite.execute(db, 'INSERT INTO User (fullname, address, email, age, password, details) VALUES (?,?,?,?,?,?)', [fullname, address, email, age, password, details])
        .then(function(result) {
            $scope.statusMessage = "Data saved successful, cheers!";
        }, function(error) {
            $scope.statusMessage = "Error on saving: " + error.message;
        })
}
    })

There is no error watsoever, but my data is not being inserted!! Can someone tell me whats my mistake here? THankx in advance.....

score 4 · Accepted Answer · edited Jan 02 '16 at 05:01

4

.run(function($ionicPlatform , **$cordovaSQLite**) 
{
    //all the code remain same here
}

Here you need to add one extra parameter in .run() function that is $cordovaSQLite

This will help you :)

edited Jan 02 '16 at 05:01

Vedda

7,066
6
42
77

answered Jan 02 '16 at 04:42

N.Raval

549
3
11

score 1 · Answer 2 · answered Apr 30 '16 at 08:38

Latest version of cordovaSQLite plugin request location property as a mandatory property. so you need to put; db=$cordovaSQLite.openDB({name: "sample.db",location: 1}); instead of db = $cordovaSQLite.openDB("sample.db"); in your app.js file. for more details follow this. https://sumithmadhushan.wordpress.com/2016/04/12/use-sqlite-in-ionic-framework/

score 0 · Answer 3 · answered Aug 23 '15 at 22:13

0

Could be a race condition. Your first query could execute after the second, and your second one could execute before the first one ends. You need to use the success handler of the transaction with the query to then execute your insert. I'd probably switch to using a Service for your persistence - that way you can hide some of these details away from the controller.

answered Aug 23 '15 at 22:13

Raymond Camden

10,661
3
34
68

I think I get wat you mean, but can you explain that with some code, cause I really have no idea how to do what you just said!! – Krazzie KAy Aug 24 '15 at 07:44
Your second DB uses the success handler, so you can see how the syntax works in general, so add a success handler to the *first* one and then you run the second one. Again, if this were all in a service, you could simplify it a bit more for your controller. – Raymond Camden Aug 24 '15 at 09:13
Thank you Raymond, but I was in a hurry n I used the old cordova method for SQLite Database!! Anyways I'll try what you have suggested as well!! – Krazzie KAy Aug 24 '15 at 10:51

score -1 · Answer 4 · answered Aug 23 '15 at 13:10

-1

You have to install the Cordova sqlite plugin from https://github.com/litehelpers/Cordova-sqlite-storage otherwise it will not work.

answered Aug 23 '15 at 13:10

brodybits

541
4
21

SQLite Database for Ionic

4 Answers4