Проблема с базой данных HTML5 при сохранении или выборе - PullRequest
Новая
       5

Проблема с базой данных HTML5 при сохранении или выборе

1 голос
/ 23 октября 2011

Потратил часы, но не смог найти, в чем проблема с кодом.

Код просто создает таблицу, если не завершается, и добавляет текст, введенный в текстовое поле.При каждой загрузке он загружает их и записывает в список. 

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        var mydb = null;

        function initDatabase() {
            try {
                if (!window.openDatabase) {
                    alert('Databases are not supported in this browser.');
                } else {
                    var shortName = 'mydb';
                    var version = '1.0';
                    var displayName = 'sample db';
                    var maxSize = 1024*1024*2;
                    mydb = openDatabase(shortName, version, displayName, maxSize, null);

                    mydb.transaction(
                        function (transaction) {
                            transaction.executeSql('CREATE TABLE IF NOT EXISTS sampletable(term TEXT NOT NULL);', [], nullDataHandler, errorHandler);
                        }
                    );

                    loadDB();
                }
            } catch(e) {
                if (e == 2) {
                    alert("Invalid database version.");
                } else {
                    alert("Unknown error "+e+".");
                }
                return;
            }
        }

        function loadDB() {
            $(".debugger").html("");

            mydb.transaction(
                function (t) {
                    t.executeSql("SELECT * FROM sampletable", [],dataSelectHandler,errorHandler);
                }
            );
        }

        function saveDB(_term) {
            mydb.transaction(
                function (transaction) {
                    transaction.executeSql("INSERT INTO sampletable(_term) VALUES (\""+_term + "\");");
                }
            );
        }

        function dataSelectHandler(transaction, results){
            $(".debugger").append("<li>Length: " + results.rows.length + "</li>");

            for (var i=0; i<results.rows.length; i++)
            {
                var row = results.rows.item(i);         
                addToHistoryUI(row['_term']);
            }
        }

        function errorHandler(transaction, error){
            if (error.code==1){
                alert("DB Table already exists");
            } else {
                // Error is a human-readable string.
                alert('Oops.  Error was '+error.message+' (Code '+error.code+')');
            }
            return false;
        }


        function nullDataHandler(){
            //alert("SQL Query Succeeded");
        }

        function addToHistoryUI(_term)
        {
            var newH = "<li>" + _term + "</li>";
            $(".addedQueries").append(newH);
        }

        $(function () {
            initDatabase();
        });

        $(document).ready(function () {
            $(".addBtn").click(function () {      
                var _term = $("#query").val();

                addToHistoryUI(_term);                  
                saveDB(_term);

                loadDB();
            });
        });
</script>
</head>
<body>
    <div data-role="page" id="index">
        <div class="panel">
                <input id="query" type="text" name="query" />
                <a class="navigationLink addBtn" href="#">add</a>
            </div>
            <div class="content">
                <ul class="addedQueries">
                </ul>
            </div>

            <ul class="debugger"></ul>
        </div>
</body>
</html>

1 Ответ

0 голосов
/ 23 октября 2011

В вашем методе saveDB () похоже, что вы пытаетесь использовать двойные кавычки в предложении WHERE.Правильно ли я по этому поводу?

Двойные кавычки не появляются в SQL.

Я не уверен, почему ваш SELECT не будет работать.Пожалуйста, оставьте сообщение об ошибке.

ОБНОВЛЕНИЕ: Вы ВСТАВЛЯЕТЕ также сбой, потому что у вас есть опечатка. 

transaction.executeSql("INSERT INTO sampletable(_term) VALUES (\""+_term + "\");");

У вас есть INTO sampleTable (_term), но у вас нет столбца с именем _term,имя столбца является термином (без подчеркивания).Я сделал это изменение, и вставки теперь происходят.

У вас также были другие мелочи.Кажется, это делает то, что вы хотите.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        var mydb = null;

        function initDatabase() {
            try {
                if (!window.openDatabase) {
                    alert('Databases are not supported in this browser.');
                } else {
                    var shortName = 'mydb';
                    var version = '1.0';
                    var displayName = 'sample db';
                    var maxSize = 1024*1024*2;
                    mydb = openDatabase(shortName, version, displayName, maxSize, null);

                    mydb.transaction(
                        function (t) {
                            t.executeSql('CREATE TABLE IF NOT EXISTS sampletable(term TEXT NOT NULL);', [], nullDataHandler, errorHandler);
                        }
                    );

                    loadDB();
                }
            } catch(e) {
                if (e == 2) {
                    alert("Invalid database version.");
                } else {
                    alert("Unknown error "+e+".");
                }
                return;
            }
        }

        function loadDB() {
            $(".debugger").html("");
            $("li").remove();

            mydb.readTransaction(
                function (t) {
                    t.executeSql("SELECT term FROM sampletable", [],dataSelectHandler,errorHandler);
                }
            );
        }

        function saveDB(_term) {
            mydb.transaction(
                function (transaction) {
                    transaction.executeSql("INSERT INTO sampletable(term) VALUES ('"+_term + "');");
                }
            );
        }

        function dataSelectHandler(t, results){

            $(".debugger").append("<li>Length: " + results.rows.length + "</li>");

            for (var i=0; i<results.rows.length; i++)
            {   
                var row = results.rows.item(i);         
                addToHistoryUI(row['term']);     

            }
        }

        function errorHandler(transaction, error){
            if (error.code==1){
                alert("DB Table already exists");
            } else {
                // Error is a human-readable string.
                alert('Oops.  Error was '+error.message+' (Code '+error.code+')');
            }
            return false;
        }


        function nullDataHandler(){
            //alert("SQL Query Succeeded");
        }

        function addToHistoryUI(_term)
        {
            var newH = "<li>" + _term + "</li>";
            $(".addedQueries").append(newH);
        }

        $(function () {
            initDatabase();
        });

        $(document).ready(function () {
            $(".addBtn").click(function () {      
                var _term = $("#query").val();

                addToHistoryUI(_term);                  
                saveDB(_term);

                loadDB();
            });
        });
</script>
</head>
<body>
    <div data-role="page" id="index">
        <div class="panel">
                <input id="query" type="text" name="query" />
                <a class="navigationLink addBtn" href="#">add</a>
            </div>
            <div class="content">
                <ul class="addedQueries">
                </ul>
            </div>

            <ul class="debugger"></ul>
        </div>
</body>
</html>
...