Description
Hi, please bear with me as I struggle to ask this question. Ok, here is most of the code I am working with:
<script>
var html5rocks = {};
html5rocks.webdb = {};
html5rocks.webdb.db = null;
html5rocks.webdb.open = function() {
var dbSize = 5 * 1024 * 1024; // 5MB
html5rocks.webdb.db = openDatabase("todo3", "1.0", "Todo manager", dbSize);
}
html5rocks.webdb.createTable = function() {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS todo3(ID INTEGER PRIMARY KEY ASC, product123 TEXT, product_id TEXT, cart_id TEXT, price TEXT, quantity TEXT, category TEXT, academy TEXT, orderable TEXT, line TEXT)", []);
});
}
html5rocks.webdb.addTodo = function(name, pid, cid, price, qty, category, academy, orderable) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
var addedOn = new Date();
tx.executeSql("INSERT INTO todo3(product123, product_id, cart_id, price, quantity, category, academy, orderable, line) VALUES (?,?,?,?,?,?,?,?,?)",
[name, pid, cid, price, qty, category, academy, orderable, price],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.updatetodo = function(price, id, qty, discount) {
var dsc = discount/100;
var dsc1 = price*dsc;
var dsc2 = price-dsc1;
var pri = price*qty
var db = html5rocks.webdb.db;
db.transaction(function(tx){
tx.executeSql("UPDATE todo3 SET price=?, quantity=?, line=? WHERE id=?;",
[dsc2, qty, pri, id],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.onError = function(tx, e) {
alert("There has been an error: " + e.message);
}
html5rocks.webdb.onSuccess = function(tx, r) {
// re-render the data.
html5rocks.webdb.getAllTodoItems(loadTodoItems);
html5rocks.webdb.getAllTodoItems123(loadTodoItems123);
}
html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM todo3", [], renderFunc,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.deleteTodo = function(id) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
tx.executeSql("DELETE FROM todo3 WHERE ID=?", [id],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.deleteTodo1 = function() {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
tx.executeSql("DELETE FROM todo3 where cart_id='<?php echo $cid; ?>'", [],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
function loadTodoItems(tx, rs) {
var rowOutput = "";
var todoItems = document.getElementById("todoItems");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo(rs.rows.item(i));
}
todoItems.innerHTML = rowOutput;
}
function renderTodo(row) {
return "<form type='post' onsubmit='Javascript:html5rocks.webdb.updatetodo(priceu"+row.ID+".value, idu"+row.ID+".value, qtyu"+row.ID+".value, discountu"+row.ID+".value); return false;'><table cellpadding='0' cellspacing='0' width='100%'><tr height='10' class='bord'><td width='10%'>[<a href='javascript:void(0);' onclick='html5rocks.webdb.deleteTodo(" + row.ID +");'>Delete</a>]</td><td width='15%'>" + row.product123 +"</td><td width='15%'>" + row.category +"</td><td width='10%'><input id='qtyu" + row.ID +"' type='text' value='" + row.quantity +"' size='5' onfocus = 'getID(this)'><div style='Display:none'>" + row.quantity +"</div></td><td width='10%'><input id='discountu" + row.ID +"' type='text' value='' size='5' onfocus = 'getID(this)'/> </td><td width='30%'><input id='priceu" + row.ID +"' type='text' value='" + row.price +"' size='5' onfocus = 'getID(this)'/><input id='idu" + row.ID +"' type='hidden' value='" + row.ID +"' size='5' onfocus = 'getID(this)'/><div style='Display:none'>" + row.price +"</div><input name='submit' id='submit' type='submit' value='Update' /></td><td>$" + row.price * row.quantity +" </td></tr></table></form><hr>";
}
<?php
$sql = mysql_query("SELECT * FROM products where city='$city'");
while($row = mysql_fetch_assoc($sql)){
$id =$row["id"];
?>
function addTodo<?php echo $id; ?>() {
var name<?php echo $id; ?> = document.getElementById("name<?php echo $id; ?>");
var pid<?php echo $id; ?> = document.getElementById("pid<?php echo $id; ?>"); var price<?php echo $id; ?> = document.getElementById("price<?php echo $id; ?>");
var cid<?php echo $id; ?> = document.getElementById("cid<?php echo $id; ?>");
var qty<?php echo $id; ?> = document.getElementById("qty<?php echo $id; ?>");
var academy<?php echo $id; ?> = document.getElementById("academy<?php echo $id; ?>");
var category<?php echo $id; ?> = document.getElementById("category<?php echo $id; ?>");
var orderable<?php echo $id; ?> = document.getElementById("orderable<?php echo $id; ?>");
html5rocks.webdb.addTodo(name<?php echo $id; ?>.value,pid<?php echo $id; ?>.value,cid<?php echo $id; ?>.value,price<?php echo $id; ?>.value,qty<?php echo $id; ?>.value,category<?php echo $id; ?>.value,academy<?php echo $id; ?>.value,orderable<?php echo $id; ?>.value);
}
<?php
}
?>
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
html5rocks.webdb.getAllTodoItems123(loadTodoItems123);
}
</script>
<script>
html5rocks.webdb.getAllTodoItems123 = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT SUM(line) as lin from todo3 where cart_id='<?php echo $cid; ?>'", [], renderFunc,
html5rocks.webdb.onError);
});
}
function loadTodoItems123(tx, rs) {
var rowOutput = "";
var todoItems123 = document.getElementById("todoItems123");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo123(rs.rows.item(i));
}
todoItems123.innerHTML = rowOutput;
}function renderTodo123(row) {
document.getElementById('total').value=row.lin;
return "<font color='white'>.................</font>$" + row.lin;
};
</script>
My question has to do with the update button in the "renderTodo" function. If I update the price, this runs fine:
db.transaction(function(tx){
tx.executeSql("UPDATE todo3 SET price=?, quantity=?, line=? WHERE id=?;",
[dsc2, qty, pri, id],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
and runs this part:
function loadTodoItems(tx, rs) {
var rowOutput = "";
var todoItems = document.getElementById("todoItems");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo(rs.rows.item(i));
}
todoItems.innerHTML = rowOutput;
}
And this part right away:
html5rocks.webdb.getAllTodoItems123 = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT SUM(line) as lin from todo3 where cart_id='<?php echo $cid; ?>'", [], renderFunc,
html5rocks.webdb.onError);
});
}
But if I try to update the discount, it runs the previous snippet right away, but not this part right away until the update is clicked again!:
function loadTodoItems123(tx, rs) {
var rowOutput = "";
var todoItems123 = document.getElementById("todoItems123");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo123(rs.rows.item(i));
}
todoItems123.innerHTML = rowOutput;
}function renderTodo123(row) {
document.getElementById('total').value=row.lin;
return "<font color='white'>.................</font>$" + row.lin;
};
</script>
I have no idea why it won't run that part right away! does anyone have any suggestions for me?
Explanation & Answer
It's very important to specify the encoding of htmlentities to match that of the input, as you did in your final example but omitted in the first three.
htmlentities($text,ENT_COMPAT,'utf-8');
Regarding communications with MySQL, you need to make sure the connection collation and character set matches the data you are transmitting. You can either set this in the configuration file, or at runtime using the following queries:
SET NAMES utf8;
SET CHARACTER SET utf8;
Make sure the table, database and server character sets match as well. There is one setting you can't change at run-time, and that's the server's character set. You need to modify it in the configuration file:
[mysqld]
character-set-server = utf8
default-character-set = utf8
skip-character-set-client-handshake
