javascript - Create sqlLit database using JQuery -
hi new jquery have done r&d on different fields tried create sqllit database using jquery have done google found code
when insert username , mail id , enter save button data disrepair
my problem data stored , remaining fields (rest,update,drop) not working
<!doctype html public> <html> <head> <title>exercise 3</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <style> html, body, h1, form, fieldset, legend, ol, li { margin: 0; padding: 0; } body{ background: #ffffff; color: #111111; font-family: georgia, "times new roman", times, serif; padding : 20px; } form#mycontact{ background: #9cbc2c; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 20px; width: 400px; height: 150px; } form#mycontact fieldset{ border: none; margin-bottom: 10px; } form#mycontact fieldset:last-of-type{ margin-bottom: 0; } form#mycontact legend{ color: #384313; font-size: 16px; font-weight: bold; padding-bottom: 10px; } form#mycontact > fieldset > legend:before{ content: "step " counter(fieldsets) ": "; counter-increment: fieldsets; } form#mycontact fieldset fieldset legend{ color: #111111; font-size: 13px; font-weight: normal; padding-bottom: 0; } form#mycontact ol li{ background: #b9cf6a; background: rgba(255,255,255,.3); border-color: #e3ebc3; border-color: rgba(255,255,255,.6); border-style: solid; border-width: 2px; -moz-border-radius: 5px; -webkit-border-radius: 5px; line-height: 30px; list-style: none; padding: 5px 10px; margin-bottom: 2px; } form#mycontact ol ol li { background: none; border: none; float: left; } form#mycontact label{ float: left; font-size: 13px; width: 110px; } form#mycontact fieldset fieldset label{ background:none no-repeat left 50%; line-height: 20px; padding: 0 0 0 30px; width: auto; } form#mycontact fieldset fieldset label:hover{ cursor: pointer; } form#mycontact textarea{ background: #ffffff; border: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; font: italic 13px georgia, "times new roman", times, serif; outline: none; padding: 5px; width: 200px; } form#mycontact input:not([type=submit]):focus, form#mycontact textarea:focus{ background: #eaeaea; } form#mycontact button { background: #384313; border: none; float:left; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; color: #ffffff; display: block; font: 14px georgia, "times new roman", times, serif; letter-spacing: 1px; margin: 7px 0 0 5px; padding: 7px 20px; text-shadow: 0 1px 1px #000000; text-transform: uppercase; } form#mycontact button:hover{ background: #1e2506; cursor: pointer; } </style> <body> <h1>contact form</h1> <form id="mycontact"> <fieldset> <legend>your details</legend> <ol> <li> <label for="username">name</label> <input id="username" type="text" placeholder="first , last name" > <input type="hidden" id="id"/> </li> <li> <label for="useremail">email</label> <input id="useremail" type="text" placeholder="example@domain.com" > </li> </ol> </fieldset> <button id="btnreset" type=submit>reset</button> <button id="submitbutton" type="submit">save</button> <button id="btnupdate" type=submit>update</button> <button id="btndrop" type=submit>drop</button> </form><br /> <div id="results"></div> </body> <script type="text/javascript" > var createstatement = "create table if not exists contacts (id integer primary key autoincrement, username text, useremail text)"; var selectallstatement = "select * contacts"; var insertstatement = "insert contacts (username, useremail) values (?, ?)"; var updatestatement = "update contacts set username = ?, useremail = ? id=?"; var deletestatement = "delete contacts id=?"; var dropstatement = "drop table contacts"; var db = opendatabase("addressbook", "1.0", "address book", 200000); // open sqlite database var dataset; var datatype; function initdatabase() // function call when page ready. { try { if (!window.opendatabase) // check browser supported sqlite or not. { alert('databases not supported in browser.'); } else { createtable(); // if supported call function create table in sqlite } } catch (e) { if (e == 2) { // version number mismatch. console.log("invalid database version."); } else { console.log("unknown error " + e + "."); } return; } } function createtable() // function create table in sqlite. { db.transaction(function (tx) { tx.executesql(createstatement, [], showrecords, onerror); }); } function insertrecord() // value input , insert record . function call when save/submit button click.. { var usernametemp = $('input:text[id=username]').val(); var useremailtemp = $('input:text[id=useremail]').val(); db.transaction(function (tx) { tx.executesql(insertstatement, [usernametemp, useremailtemp], loadandreset, onerror); }); //tx.executesql(sql query statement,[ parameters ] , sucess result handler function, error result handler function ); } function deleterecord(id) // id of record . function call when delete button click.. { var iddelete = id.tostring(); db.transaction(function (tx) { tx.executesql(deletestatement, [id], showrecords, onerror); alert("delete sucessfully"); }); resetform(); } function updaterecord() // id of record . function call when delete button click.. { var usernameupdate = $('input:text[id=username]').val().tostring(); var useremailupdate = $('input:text[id=useremail]').val().tostring(); var useridupdate = $("#id").val(); db.transaction(function (tx) { tx.executesql(updatestatement, [usernameupdate, useremailupdate, number(useridupdate)], loadandreset, onerror); }); } function droptable() // function call when drop button click.. talbe dropped database. { db.transaction(function (tx) { tx.executesql(dropstatement, [], showrecords, onerror); }); resetform(); initdatabase(); } function loadrecord(i) // function display records retrived database. { var item = dataset.item(i); $("#username").val((item['username']).tostring()); $("#useremail").val((item['useremail']).tostring()); $("#id").val((item['id']).tostring()); } function resetform() // function reset form input values. { $("#username").val(""); $("#useremail").val(""); $("#id").val(""); } function loadandreset() //function load , reset... { resetform(); showrecords() } function onerror(tx, error) // function hendeling error... { alert(error.message); } function showrecords() // function retrive data database display records list { $("#results").html('') db.transaction(function (tx) { tx.executesql(selectallstatement, [], function (tx, result) { dataset = result.rows; (var = 0, item = null; < dataset.length; i++) { item = dataset.item(i); var linkeditdelete = '<li>' + item['username'] + ' , ' + item['useremail'] + ' ' + '<a href="#" onclick="loadrecord(' + + ');">edit</a>' + ' ' + '<a href="#" onclick="deleterecord(' + item['id'] + ');">delete</a></li>'; $("#results").append(linkeditdelete); } }); }); } $(document).ready(function () // call function when page ready load.. { ; $("body").fadein(2000); // fede in effect when page load.. initdatabase(); $("#submitbutton").click(insertrecord); // register event listener when button click. $("#btnupdate").click(updaterecord); $("#btnreset").click(resetform); $("#btndrop").click(droptable); }); </script> </html> <span style="font-family: calibri; font-size: small;"> please give me idea problem thank in advanced
you can create sqlite database, in browser, have js code. first, have call createtable function, (but have fill createstatement correct create stament. ex.: "create table users (id, name, whatever need)" later have insert data created table. valid insert stament "insert users values (1,"john", "foo");
Comments
Post a Comment