Im using the following code to create a table product via mysql statement, the insert part for the table product is being done correctly. I have also created another table (product_add). I want to add only one specific row from table product to the table product_add as soon as I click on the button ADD which Im unable to do. The button Add will appear on a row when im inserting data for the table product.
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<a href=# data-role=button id=create> Create product table </a>
<a href=# data-role=button id=remove> Delete product table </a>
<a href=# data-role=button id=create_add> Create product_add table </a>
<a href=# data-role=button id=remove_add> Delete product_add table </a>
<span> Name </span>
<input type=text id=name>
<span> Description </span>
<input type=text id=description>
<span> Category </span>
<input type=text id=category>
<span> Price </span>
<input type=text id=price>
<a href=# data-role=button id=insert> Insert the product </a>
<a href=# data-role=button id=list> List product </a>
</div>
</div>
<div data-role=page id=win2 data-add-back-btn=true>
<div data-role=header>
<h1>List of product</h1>
</div>
<a href=# data-role=button id=cart>View Cart</a>
<div data-role=content>
</div>
</div>
<div data-role=page id=win3 data-add-back-btn=true>
<div data-role=header>
<h1>List of product in cart</h1>
</div>
<div data-role=content>
</div>
</div>
</body>
</html>
<script>
var db = openDatabase ("pascal", "1.0", "pascal", 1024);
$("#create").bind ("click", function (event)
{
db.transaction (function (transaction)
{
var sql = "CREATE TABLE product" +
" (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, " +
"name VARCHAR(100) NOT NULL, " +
"description VARCHAR(100) NOT NULL, " +
"category VARCHAR(100) NOT NULL, "+
"price INTEGER(10)NOT NULL)"
transaction.executeSql (sql, undefined, function ()
{
alert ("Table created");
}, error);
});
});
$("#create_add").bind ("click", function (event)
{
db.transaction (function (transaction)
{
var sql = "CREATE TABLE product_add" +
" (pid INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, " +
"prod_id INTEGER NOT NULL,"+
"name VARCHAR(100) NOT NULL, " +
"price INTEGER(10)NOT NULL)"
transaction.executeSql (sql, undefined, function ()
{
alert ("Table created");
}, error);
});
});
$("#remove").bind ("click", function (event)
{
if (!confirm ("Delete table?", "")) return;;
db.transaction (function (transaction)
{
var sql = "DROP TABLE product";
transaction.executeSql (sql, undefined, ok, error);
});
});
$("#remove_add").bind ("click", function (event)
{
if (!confirm ("Delete table?", "")) return;;
db.transaction (function (transaction)
{
var sql = "DROP TABLE product_add";
transaction.executeSql (sql, undefined, ok, error);
});
});
$("#insert").bind ("click", function (event)
{
var name = $("#name").val ();
var description = $("#desc").val ();
var category = $("#category").val ();
var price = $("#price").val ();
db.transaction (function (transaction)
{
var sql = "INSERT INTO product(name, descrition, category, price) VALUES (?, ?, ?, ?)";
transaction.executeSql (sql, [name, description, category, price], function ()
{
alert ("Product added");
}, error);
});
});
function add(){
alert("Button ADD has been triggered...");
db.transaction (function (transaction)
{
var sql = "INSERT INTO product_add (prod_id, name, price) SELECT id, name, price
FROM product ";
transaction.executeSql (sql, [id, name, price], function ()
{
alert ("Product inserted to cart");
}, error);
});
}//end function add
$("#list").bind ("click", function (event)
{
db.transaction (function (transaction)
{
var sql = "SELECT * FROM product";
transaction.executeSql (sql, undefined,
function (transaction, result)
{
var html = "<ul>";
if (result.rows.length)
{
for (var i = 0; i < result.rows.length; i++)
{
var row = result.rows.item (i);
var name = row.name;
var description = row.description;
var category = row.category;
var price = row.price;
html += "<li>"+ name + " " + description + " " + category + " " +
price + "<input type='submit' id='add' value='ADD' onclick='add();'></a>" + "
</li>";
}
}
else
{
html += "<li> No Product found </li>";
}
html += "</ul>";
$("#win2").unbind ().bind ("pagebeforeshow", function ()
{
var $content = $("#win2 div:jqmData(role=content)");
$content.html (html);
var $ul = $content.find ("ul");
$ul.listview ();
});
$.mobile.changePage ($("#win2"));
}, error);
});
});
$("#cart").bind ("click", function (event)
{
db.transaction (function (transaction)
{
var sql = "SELECT prod_id, name, price FROM product_add";
transaction.executeSql (sql, undefined,
function (transaction, result)
{
var html = "<ul>";
if (result.rows.length)
{
for (var i = 0; i < result.rows.length; i++)
{
var row = result.rows.item (i);
var name = row.name;
var description = row.description;
// var category = row.category;
var price = row.price;
html += "<li>"+ name + " " + description + " " + price + "<input
type='submit' name='delete' value='Delete'>" + "</li>";
}
}
else
{
html += "<li> No Product found </li>";
}
html += "</ul>";
$("#win3").unbind ().bind ("pagebeforeshow", function ()
{
var $content = $("#win3 div:jqmData(role=content)");
$content.html (html);
var $ul = $content.find ("ul");
$ul.listview ();
});
$.mobile.changePage ($("#win3"));
}, error);
});
});
function ok ()
{
}
function error (transaction, err)
{
alert ("DB error : " + err.message);
return false;
}
</script>