AJAX HTML Javascript jQuery PHP Example MORE

Cordova update or edit data in SQLite


www/index.html

<!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">Name</th> <th class="mdl-data-table__cell--non-numeric">Phone</th><th class="mdl-data-table__cell--non-numeric">Action</th></tr>';
                for (var i=0; i<len; i++){
                
                            var id = result.rows.item(i).id;
                            var name = result.rows.item(i).name;
                            var phone = result.rows.item(i).phone;
                            tblText +='<tr ><td class="mdl-data-table__cell--non-numeric">'
                            + name +'</td><td class="mdl-data-table__cell--non-numeric">' + phone +'</td><td><a href="manage_student.html?student_id='+id+'"><button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Manage</button></a></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>

www/manage_student.html

<!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">Update Data SQLite</h4>
        <!-- Simple Textfield -->
        <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text" id="name" >
            
        </div><br>
        <!-- Numeric Textfield -->
        <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text"  id="phone">
            
        </div><br>
        <input class="mdl-textfield__input" type="hidden"  id="id">
        <!-- Accent-colored raised button with ripple -->
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onclick="updateData()">
          Update
        </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">
    var db = window.openDatabase("tutorialdb", "1.0", "tutorial database", 1000000); //will create tutorialdb Dummy_DB or open it
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        fetchSingleData();
    }           
    function fetchSingleData(){
        db.transaction(function(tx){
                        var url_string = document.location.href; //window.location.href
                        var url = new URL(url_string);
                        var c = url.searchParams.get("student_id");
                        
        tx.executeSql('select * from studentsDb where id="'+c+'"',[],function(tx1,result){  
                
                            var id = result.rows.item(0).id;
                            var name = result.rows.item(0).name;
                            var phone = result.rows.item(0).phone;
                            document.getElementById("phone").value = phone;
                            document.getElementById("name").value = name;
                            document.getElementById("id").value = id;
     
            },errorCB);
        }, errorCB, successCB);
    }
    function errorCB(err) {
        alert("Error processing SQL: "+err.code);
    }
    function updateData(){
        db.transaction(updateQuery, errorCB, successCB);
        alert("Data Updated Successfully !");
        window.location.reload();
    }
    function updateQuery(tx){
        var name = document.getElementById('name').value;
        var phone = document.getElementById('phone').value;
        var id = document.getElementById('id').value;
        // Insert query
        tx.executeSql('UPDATE studentsDb SET name="'+name+'" ,phone="'+phone+'" where id="'+id+'"');
    }
    
    function successCB() {
        //db.transaction(queryDB, errorCB);
    }
  </script>
 </body>
</html>