x4bmzqhX

1<meta name="format-detection" content="telephone=no">
2    <meta name="msapplication-tap-highlight" content="no">
3    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
4    <link rel="stylesheet" type="text/css" href="css/index.css">
5    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
6    <script>
7    var createStatement = "CREATE TABLE IF NOT EXISTS Contacts (id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT, useremail TEXT)";
8
9    var selectAllStatement = "SELECT * FROM Contacts";
10
11    var insertStatement = "INSERT INTO Contacts (username, useremail) VALUES (?, ?)";
12
13    var updateStatement = "UPDATE Contacts SET username = ?, useremail = ? WHERE id=?";
14
15    var deleteStatement = "DELETE FROM Contacts WHERE id=?";
16
17    var dropStatement = "DROP TABLE Contacts";
18
19    var db = window.sqlitePlugin.openDatabase("AddressBook", "1.0", "Address Book", 200000);  // Open SQLite Database
20
21    var dataset;
22
23    var DataType;
24
25    function initDatabase()  // Function Call When Page is ready.
26
27    {
28
29        try {
30
31            if (!window.sqlitePlugin.openDatabase)  // Check browser is supported SQLite or not.
32
33            {
34
35                alert('Databases are not supported in this browser.');
36
37            }
38
39            else {
40
41                createTable();  // If supported then call Function for create table in SQLite
42
43            }
44
45        }
46
47        catch (e) {
48
49            if (e == 2) {
50
51                // Version number mismatch.
52
53                alert("Invalid database version.");
54
55            } else {
56
57               alert("Unknown error " + e + ".");
58
59            }
60
61            return;
62
63        }
64
65    }
66
67    function createTable()  // Function for Create Table in SQLite.
68
69    {
70
71        db.transaction(function (tx) { tx.executeSql(createStatement, [], showRecords, onError); });
72
73    }
74
75    function insertRecord() // Get value from Input and insert record . Function Call when Save/Submit Button Click..
76
77    {
78
79        var usernametemp = $('input:text[id=username]').val();
80
81        var useremailtemp = $('input:text[id=useremail]').val();
82        db.transaction(function (tx) { tx.executeSql(insertStatement, [usernametemp, useremailtemp], loadAndReset, onError); });
83
84        //tx.executeSql(SQL Query Statement,[ Parameters ] , Sucess Result Handler Function, Error Result Handler Function );
85
86    }
87
88    function deleteRecord(id) // Get id of record . Function Call when Delete Button Click..
89
90    {
91
92        var iddelete = id.toString();
93
94        db.transaction(function (tx) { tx.executeSql(deleteStatement, [id], showRecords, onError); alert("Delete Sucessfully"); });
95
96        resetForm();
97
98    }
99
100    function updateRecord() // Get id of record . Function Call when Delete Button Click..
101
102    {
103
104        var usernameupdate = $('input:text[id=username]').val().toString();
105
106        var useremailupdate = $('input:text[id=useremail]').val().toString();
107
108        var useridupdate = $("#id").val();
109
110        db.transaction(function (tx) { tx.executeSql(updateStatement, [usernameupdate, useremailupdate, Number(useridupdate)], loadAndReset, onError); });
111
112    }
113
114    function dropTable() // Function Call when Drop Button Click.. Talbe will be dropped from database.
115
116    {
117
118        db.transaction(function (tx) { tx.executeSql(dropStatement, [], showRecords, onError); });
119
120        resetForm();
121
122        initDatabase();
123
124    }
125
126    function loadRecord(i) // Function for display records which are retrived from database.
127
128    {
129
130        var item = dataset.item(i);
131
132        $("#username").val((item['username']).toString());
133
134        $("#useremail").val((item['useremail']).toString());
135
136        $("#id").val((item['id']).toString());
137
138    }
139
140    function resetForm() // Function for reset form input values.
141
142    {
143
144        $("#username").val("");
145
146        $("#useremail").val("");
147
148        $("#id").val("");
149
150    }
151
152    function loadAndReset() //Function for Load and Reset...
153
154    {
155
156        resetForm();
157
158        showRecords()
159
160    }
161
162    function onError(tx, error) // Function for Hendeling Error...
163
164    {
165
166        alert(error.message);
167
168    }
169
170    function showRecords() // Function For Retrive data from Database Display records as list
171
172    {
173
174        $("#results").html('')
175
176        db.transaction(function (tx) {
177
178            tx.executeSql(selectAllStatement, [], function (tx, result) {
179
180                dataset = result.rows;
181
182                for (var i = 0, item = null; i < dataset.length; i++) {
183
184                    item = dataset.item(i);
185
186                    var linkeditdelete = '<li>' + item['username'] + ' , ' + item['useremail'] + '    ' + '<a href="#" onclick="loadRecord(' + i + ');">edit</a>' + '    ' +
187
188                                                '<a href="#" onclick="deleteRecord(' + item['id'] + ');">delete</a></li>';
189
190                    $("#results").append(linkeditdelete);
191
192                }
193
194            });
195
196        });
197
198    }
199
200    $(document).ready(function () // Call function when page is ready for load..
201
202    {
203        ;
204
205        $("body").fadeIn(2000); // Fede In Effect when Page Load..
206
207        initDatabase();
208
209        $("#submitButton").click(insertRecord);  // Register Event Listener when button click.
210
211        $("#btnUpdate").click(updateRecord);
212
213        $("#btnReset").click(resetForm);
214
215        $("#btnDrop").click(dropTable);
216
217    });
218
219    </script>
220
221</head>
222<body>
223
224    <h1>
225        Form
226    </h1>
227    <form id="mycontact">
228        <fieldset>
229            <legend>
230                Your details
231            </legend>
232            <ol>
233                <li>
234                    <label for="username">
235                        Name
236                    </label>
237                    <input id="username" type="text" placeholder="First and last name" required autofocus pattern="" />
238                    <input type="hidden" id="id" />
239                </li>
240                <li>
241
242                    <label for="useremail">Email</label>
243
244                    <input id="useremail" type="text" placeholder="example@domain.com" required pattern="" />
245
246                </li>
247            </ol>
248        </fieldset>
249
250        <input type="button" id="btnReset" value="Reset"/>
251
252        <input type="button" id="submitButton"  value="Save"/>
253
254        <input id="btnUpdate" type="button" value="Update"/>
255
256        <input id="btnDrop" type="button" value="Drop"/>
257
258    </form>
259    <br />
260
261    <div id="results">
262
263
264    </div>
265
266    <script type="text/javascript" src="cordova.js"></script>
267    <script type="text/javascript" src="scripts/platformOverrides.js"></script>
268    <script type="text/javascript" src="scripts/index.js"></script>
269</body>