I've encountered a challenge while utilizing WebSQL for my Chrome Extension. This is my first experience with it, so I decided to refer to this tutorial and modify it to suit my requirements: http://www.html5rocks.com/en/tutorials/webdatabase/todo/
Below is the code snippet:
var favorites = {};
favorites.webdb = {};
favorites.webdb.db = null;
favorites.webdb.open = function () {
var dbSize = 5 * 1024 * 1024; // 5MB
favorites.webdb.db = openDatabase("favorites", "1", "Favorites Database", dbSize);
};
favorites.webdb.onError = function(tx, e) {
alert("An error has occurred: " + e.message);
};
favorites.webdb.onSuccess = function(tx, r) {
favorites.webdb.getAllTiles(loadTiles);
};
favorites.webdb.createTable = function() {
var db = favorites.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS " +
"tiles(ID INTEGER PRIMARY KEY ASC, name, colour, width, linkURL, imgURL)", []);
});
};
favorites.webdb.addTile = function(tileName, tileColour, tileWidth, tileLinkURL, tileImgURL) {
var db = favorites.webdb.db;
db.transaction(function(tx){
tx.executeSql("INSERT INTO tiles(name, colour, width, linkURL, imgURL) VALUES (?,?,?,?,?)",
[tileName, tileColour, tileWidth, tileLinkURL, tileImgURL],
favorites.webdb.onSuccess,
favorites.webdb.onError);
});
};
function loadTiles(tx, rs) {
var rowOutput = "";
var todoItems = document.getElementById("tiles");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTile(rs.rows.item(i));
}
tiles.innerHTML = rowOutput;
}
function renderTile(row) {
return "<a href='" + row.tileLinkURL + "'>" +
"<div class='mdl-js-button mdl-js-ripple-effect tile' style='background-color:" + row.tileColour + "; width:" + row.tileWidth + "px;'>" +
"<img class='tileimg' src='" + row.tileImgURL + "'>" +
"</div>" +
"</a>";
};
favorites.webdb.deleteTile = function(id) {
var db = favorites.webdb.db;
db.transaction(function(tx){
tx.executeSql("DELETE FROM tiles WHERE ID=?", [id],
favorites.webdb.onSuccess,
favorites.webdb.onError);
});
};
function init() {
favorites.webdb.open();
favorites.webdb.createTable();
};
Upon attempting to add data to the database, I encountered an error: https://i.sstatic.net/D1wye.png
I would appreciate any assistance in identifying what may be wrong with my code.