<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'" />
<title>Cordova App</title>
<link rel="stylesheet" href="css/material.indigo-pink.min.css"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
</head>
<body>
<main class="mdl-layout__content mdl-color--grey-100">
<div class="mdl-grid demo-content" style="width:100%">
<h4 align="center">Insert Data SQLite</h4>
<!-- Simple Textfield -->
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="name" >
<label class="mdl-textfield__label" for="sample1">Name</label>
</div><br>
<!-- Numeric Textfield -->
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="phone">
<label class="mdl-textfield__label" for="sample2">Phone</label>
</div><br>
<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onclick="insertData()">
Save
</button>
</div>
<div id="tblDiv"></div>
</div>
<!-- Script -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/material.js"></script>
<script type="text/javascript">
// window.openDatabase("database-name","version","database description","database size in bytes")
var db = window.openDatabase("tutorialdb", "1.0", "tutorial database", 1000000); //will create database Dummy_DB or open it
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Create Table
db.transaction(populateDB, errorCB, successCB);
// Select records
fetchData();
}
function populateDB(tx){
tx.executeSql('CREATE TABLE IF NOT EXISTS studentsDb (id INTEGER PRIMARY KEY AUTOINCREMENT,name TEXT NOT NULL,phone TEXT NOT NULL)');
}
// Fetch all records
function fetchData(){
db.transaction(function(tx){
tx.executeSql("select * from studentsDb order by id desc",[],function(tx1,result){
var len = result.rows.length;
var tblText='<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp" style="width:100%"><tr><th class="mdl-data-table__cell--non-numeric">Sl No</th> <th class="mdl-data-table__cell--non-numeric">Name</th> <th class="mdl-data-table__cell--non-numeric">Phone</th></tr>';
for (var i=0; i<len; i++){
var j=i+1;
var name = result.rows.item(i).name;
var phone = result.rows.item(i).phone;
tblText +='<tr><td class="mdl-data-table__cell--non-numeric">' +j+'</td><td class="mdl-data-table__cell--non-numeric">'
+ name +'</td><td class="mdl-data-table__cell--non-numeric">' + phone +'</td></tr>';
}
tblText +="</table>";
document.getElementById("tblDiv").innerHTML =tblText;
},errorCB);
}, errorCB, successCB);
}
function insertData(){
db.transaction(insertQuery, errorCB, successCB);
alert("Data Added Successfully !");
window.location.reload();
}
function insertQuery(tx){
var name = document.getElementById('name').value;
var phone = document.getElementById('phone').value;
// Insert query
tx.executeSql('INSERT INTO studentsDb(name,phone) VALUES ("'+name+'","'+phone+'")');
}
function errorCB(err) {
alert("Error processing SQL: "+err.code);
}
function successCB() {
//db.transaction(queryDB, errorCB);
}
</script>
</body>
</html>