Hi,

I have used a guide, http://ofps.oreilly.com/titles/97805...d35816678.html to build an inventory taking application using JQuery and JQTouch. Everything is working correctly (no errors are thrown) except the Inventory "#scans" page does not populate the data. (IE, when I add a new product, I can view the product in the database in Safari under "Web Inspector", but the #scans "li" does not appear.)

How can I get this page to load correctly? The problem may be in the scan.js file under "function refreshEntries()". (determined by using the "alert" function to see where the code is not running). (The jquery and jqtouch codes are loaded using their default versions).

The "scan.js" file:
Code:
var jQT = $.jQTouch({
    icon: 'logo.png',
    statusBar: 'black'
});
var db;
$(document).ready(function () {
    $('#createEntry form').submit(createEntry);
    $('#settings form').submit(saveSettings);
    $('#settings').bind('pageAnimationStart', loadSettings);
    var shortName = 'CK1';
    var version = '1.6';
    var displayName = 'CK1';
    var maxSize = 65536;
    db = openDatabase(shortName, version, displayName, maxSize);
    db.transaction(
        function (transaction) {
            transaction.executeSql(
                'CREATE TABLE IF NOT EXISTS entries ' +
                '   (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
                '    date DATE NOT NULL, location TEXT, barcode1 INTEGER NOT NULL, ' +
                '    barcode2 INTEGER, packsAvailable INTEGER, ' +
                '    supplier TEXT, certification TEXT, ' +
                '    quality TEXT, thickness TEXT, cut TEXT);'
            );
        }
    );
});
function loadSettings() {
    $('#location').val(localStorage.location);
}
function saveSettings() {
    localStorage.location = $('#location').val();
    jQT.goBack();
    return false;
}
function createEntry() {
    var date = new Date();
    date.setDate(date.getDate());
    var location = localStorage.location;
    var barcode1 = $('#grabbaData').val();
    var barcode2 = $('#barcode2').val();
    var packsAvailable = $('#packsAvailable').val();
    var supplier = $('#supplier').val();
    var certification = $('#certification').val();
    var quality = $('#quality').val();
    var thickness = $('#thickness').val();
    var cut = $('#cut').val();
    db.transaction(
        function (transaction) {
            transaction.executeSql(
                'INSERT INTO entries (date, location, barcode1, barcode2, packsAvailable, supplier, certification, quality, thickness, cut) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?);',
                [date, location, barcode1, barcode2, packsAvailable, supplier, certification, quality, thickness, cut],
                function () {
                    refreshEntries();
                    $('#grabbaData').val(null);
                    $('#barcode2').val(null);
                    $('#packsAvailable').val(null);
                    $('#supplier').val(null);
                    $('#certification').val(null);
                    $('#quality').val(null);
                    $('#thickness').val(null);
                    $('#cut').val(null);
                },
                errorHandler
            );
        }
    );
    return false;
}
function refreshEntries() {
    $('#scans ul li:gt(0)').remove();
    db.transaction(
        function(transaction) {
            transaction.executeSql(
                'SELECT * FROM entries ORDER BY id;',
                function (transaction, result) {
                    for (var i=0; i < result.rows.length; i++) {
                        var row = result.rows.item(i);
                        var newEntryRow = $('#entryTemplate').clone();
                        newEntryRow.removeAttr('id');
                        newEntryRow.removeAttr('style');
                        newEntryRow.data('entryId', row.id);
                        newEntryRow.appendTo('#scans ul');
                        newEntryRow.find('.label').text(row.barcode1);
                        newEntryRow.find('.pack').text(row.packsAvailable);
                        newEntryRow.find('.delete').click(function() {
                            var clickedEntry = $(this).parent();
                            var clickedEntryId = clickedEntry.data('entryId');
                            deleteEntryById(clickedEntryId);
                            clickedEntry.slideUp();
                        });
                    }
                },
            errorHandler
            );
        }
    );
}
function deleteEntryById(id) {
    db.transaction(
        function(transaction) {
            transaction.executeSql('DELETE FROM entries WHERE id=?;',
              [id], null, errorHandler);
        }
    );
}
function errorHandler(transaction, error) {
    alert('Oops. Error was '+error.message+' (Code '+error.code+')');
    return true;
}
The HTML file that calls this script:
Code:
<html>
<head>
<title>Please Help Me</title>
    <link rel="stylesheet" type="text/css" media="screen" href="jqtouch/themes/css/jqtouch.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="jqtouch/themes/jqt/theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="scan.css" />
    <script type="text/javascript" src="jqtouch/src/lib/jquery-1.7.js"></script>
    <script type="text/javascript" src="jqtouch/src/jqtouch-jquery.js"></script>
    <script type="text/javascript" src="jqtouch/src/jqtouch.js"></script>
    <script type="text/javascript" src="scan.js"></script>
</head>
<body>
<div id="home">
            <div class="toolbar">
                <h1>Confidential</h1>
                <a class="button flip" href="#settings">Location</a>
            </div>
            <ul class="edgetoedge">
                <li class="arrow"><a href="#scans">Inventory</a></li>
                <li class="arrow"><a href="#about">About</a></li>
            </ul>
</div>
        <div id="about">
            <div class="toolbar">
                <h1>About</h1>
                <a class="button back" href="#">Back</a>
            </div>
            <div>
                <p>This application should be used for recording information about your inventory.</p>
            </div>
        </div>
<div id="scans">
    <div class="toolbar">
        <h1>Inventory</h1>
        <a class="button back" href="#">Back</a>
        <a class="button slideup" href="#createEntry">Scan</a>
    </div>
    <ul class="edgetoedge">
        <li id="entryTemplate" class="entry" style="display:none">
            <span class="label">0000000</span>
            <span class="pack">00</span>
            <span class="delete">Delete</span>
        </li>
    </ul>
</div>
<div id="createEntry">
    <div class="toolbar">
        <h1>Scan Product</h1>
        <a class="button cancel" href="#">Return</a>
    </div>
    <form method="post">
        <ul>
            <li><input type="text" placeholder="Scan Barcode 1" name="barcode1" id="grabbaData" pattern="[0-9]*"
                 autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
            <li><input type="text" placeholder="Barcode Extras" name="barcode2" id="barcode2" pattern="[0-9]*"
                 autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
            <li><input type="text" placeholder="Packs Available" name="packsAvailable" id="packsAvailable" pattern="[0-9]*"
                 autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
            <li><input type="text" placeholder="Supplier" name="supplier" id="supplier"
                 autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
            <li><input type="text" placeholder="USDA Certifications" name="certification" id="certification"
                 autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
            <li><input type="text" placeholder="Quality" name="quality" id="quality"
                 autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
            <li><input type="text" placeholder="Animal Size (Thick)" name="thickness" id="thickness"
                 autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
            <li><input type="text" placeholder="Animal Cut" name="cut" id="cut"
                 autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
            <li><input type="submit" class="submit" name="action"
                value="Save Entry" /></li>
        </ul>
    </form>
</div>
<div id="settings">
    <div class="toolbar">
        <h1>Settings</h1>
        <a class="button cancel" href="#">Cancel</a>
    </div>
    <form method="post">
        <ul>
            <li><input placeholder="Location" type="text" name="location" id="location" /></li>
            <li><input type="submit" class="submit" name="action" 
                value="Save Changes" /></li>
        </ul>
    </form>
</div>
</body>
</html>