WEBSQL2/Blog.html at master · menithya/WEBSQL2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!doctype html>
<html lang="en" ng-app="blogApp">
<head>
 <meta charset="utf-8">

 <title></title>

 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script src="js/webSqlSync.js" type="application/x-javascript" charset="utf-8"></script>
 <style>

.mainContainer{
 position:absolute;
 width:500px;
 height:400px;
 z-index:15;
 top:50%;
 left:50%;


}

 </style>
 </head>

 <body>
 <form action="#" method="post" class="form-horizontal" id="formCuts">
	 <div class="mainContainer">
		Name: <input type="text" id="txtName" name="personname"> </input>
		 <div class="">
			 <label>
			 <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" >
			 Yes
			 </label>
			 <label>
			 <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" >
			 No
			 </label>
		 </div>
	 </div>
 </form>
 <script>
   //create database on browser
   var db = openDatabase("nithya", '1.0', 'my first database', 2 * 1024 * 1024);
    $(document).ready(function(){
	   initDB();

	   handleFormData()

	});

	//init db like creating table if not created
	function initDB(){
	  var user = "CREATE TABLE IF NOT EXISTS user (id INTEGER PRIMARY KEY, name varchar(500))";
	  db.transaction(function (tx) {

		 tx.executeSql(user,[],onSuccess,onError);

		// tx.executeSql("UPDATE SQLITE_SEQUENCE SET seq = -1 WHERE name = user ");

	  },onError,onReadyTrans);


	};

	function handleFormData(){
	  $('form')
	   .change(function(){
	       var userName = $('#txtName').val();

		   db.transaction(function(tx){
		       tx.executeSql("UPDATE SQLITE_SEQUENCE SET seq = -1 WHERE name = 'user'");

		       tx.executeSql("INSERT INTO user(name) VALUES(?)", [userName],onSuccess,onError);
		   });

	   });
	}

	function onSuccess(tx, result){
	  console.log("onSucess is called")
	}

	function onError(err){
	  console.log(err)
	}


	function onReadyTrans( ){
		console.log( 'Transaction completed' )
	}


 </script>

 </body>
 </html>