html5sql.js Basic SELECT Example

A basic example of retrieving data from a select statment using html5sql.

by secretgspot

HTML

<script src="http://html5sql.com/js/html5sql.js"></script>
<header>
    <h1>html5sql.js Example Fiddle</h1>
    <button id="createTable">Create Table</button>
    <button id="selectExample">Select Data</button>
</header>

<h2>Successfull Statements:</h2>
<ul id="successfullStatements"></ul>

<h2>Errors:</h2>
<ul id="errors"></ul>

CSS

header {
    text-align: center;
}

h1 {
    font-weight: bold;
    font-size: 1.6em;
}

h2 {
    font-weight: bold;
    font-size: 1.3em;
}

ul {
    margin: 5px 15px 30px;
    list-style: square;
}

button {
    padding: 10px;
    margin: 10px;
}

JavaScript

$(function(){
    //This must be called to open the connection to the database before any statements are processed
    html5sql.openDatabase("exampleDB","Example Database",3*1024*1024);
    
    $("#createTable").click(function(){
        var successfullStatements = $("#successfullStatements"),
            errors = $("#errors");
            
        html5sql.process(
             [
                "DROP TABLE IF EXISTS StarWarsCharacters;",
                "CREATE TABLE IF NOT EXISTS StarWarsCharacters (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT);",
                "INSERT INTO StarWarsCharacters (name) VALUES ('Yoda');",
                "INSERT INTO StarWarsCharacters (name) VALUES ('Darth Vader');",
                "INSERT INTO StarWarsCharacters (name) VALUES ('Luke Skywalker');",
                "INSERT INTO StarWarsCharacters (name) VALUES ('Princess Leia');",
             ],
             function(){
                 successfullStatements.append("<li>Created Star Wars Characters Table</li>");
             },
             function(error, statement){
                 errors.append("<li>"+error.message+" Occured while processing: "+statement+"</li>");
             }
        );
    });
    
    $("#selectExample").click(function(){
        var successfullStatements = $("#successfullStatements"),
            errors = $("#errors")
                 
        html5sql.process(
             ["SELECT * FROM StarWarsCharacters;"],
             function(transaction, results, rowsArray){
                 for(var i = 0; i < rowsArray.length; i++){
                     successfullStatements.append("<li>Retrieved" +rowsArray[i].name+"</li>");
                 }
                 successfullStatements.append("<li>Done selecting data</li>");
             },
             function(error, statement){
                 errors.append("<li>"+error.message+" Occured while processing: "+statement+"</li>");
             }
        );
    });
});