Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I got this thing done as follows:</p> <p>This is my javascript:</p> <pre><code>&lt;script type="text/javascript"&gt; var firstNameBox=null; var lastNameBox=null; var=null; var dataTable=null; &lt;!-- Called when phonegap javascript is loded --&gt; function onDeviceReady() { var addButton = document.getElementById("add"); firstNameBox = document.getElementById("firstName"); lastNmaeBox = document.getElementById("lastName"); dataTable = document.getElementById("data-table"); db=Window.openDatabase("contactDB",1.0,"Contact Database,1000000"); &lt;!--name,version,display name,size --&gt; addButton.addEventListener("click",function(){ db..transaction( &lt;!-- SQL Statments --&gt; funnction(tx){ ensureTableExists(tx); var firstName= firstNameBox.value; var lastNameBox.value; var sql='INSERT INTO Contacts(firstName,lastName) VALUES ("'+firstName+'","'+lastName+'")'; tx.executeSql(sql); }, //error callback function(err){ alert("error callback"+err.code); }, //success callback function(err){ loadFromDB(); }); },false); loadFromDB(); } loadFromDB(); } function loadFromDB(){ db.transaction( //function sql statements function(tx){ ensureTableExists(tx); tx.executeExists('SELECT *FROM Contacts',[],function(tx,results){ var htmlStr=""; for(var index=0;index&lt;results.rows.length;index++){ var item = result.rows.item(index); htmlStr=htmlStr+"&lt;tr&gt;&lt;td&gt;"+item.firstName+"&lt;/td&gt;&lt;td&gt;"+item.lastName+"&lt;/td&gt;&lt;td&gt;&lt;button onclick=\"deleteEntry('"+item.id+"');\"&gt;X&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;"; } dataTable.innerHTML=htmlStr;},function(err{ alert("Unable to fetch result from Contacts Table"); }); }, //error CallBack function(err){ alert("error callBack"+err.code+""+err.message); }, //Success CallBack function(){ firstNameBox.value = ""; lastNameBox.value =""; }); } function deleteEntry(id){ db.transaction( //function sql statements function(tx){ ensureTableExists(tx); tx.executeSql('Delete FROM Contacts where id'+id); }, //eror callback function(err){ alert("error callback"+err.code+" "+err.message); }, //success callback function(err){ loadFromDB(); }); } function ensureTableExists(tx){ tx.executeSql('CREATE TABLE IF NOT EXISTS Contacts(id INTEGER PRIMARY KEY,firstName,lastName)'); } //Called when browers is loded function init(){ document.addEventListener("deviceready",onDeviceReady,false); } &lt;/script&gt; </code></pre> <p>This is my HTML Body:</p> <pre><code>&lt;body onload="init()"&gt; &lt;h3&gt;Database Table View&lt;/h3&gt; &lt;table border="1"&gt; &lt;tr&gt; &lt;td&gt; &lt;b&gt;First Name&lt;/b&gt; &lt;/td&gt; &lt;td&gt; &lt;b&gt;Last Name&lt;/b&gt; &lt;/td&gt; &lt;td&gt; &lt;b&gt;Action&lt;/b&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table id="data-table"&gt;&lt;/table&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt; &lt;input id="firstName" type="text"&gt;&lt;/input&gt;&lt;/td&gt; &lt;td&gt;&lt;button id="add"&gt;Add&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; &lt;/body&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload