samedi 27 février 2016

Phonegap sqlite javascript

I have been trying to setup a sql lite database for my application but I can not make it work for some reason, here's my code. What i'm doing wrong here? has phonegap changed recently? I watched a couple of tutorials and most people did it with a similar way and it seems to work.

<!DOCTYPE html>

    <script src="js/custom.js"> </script>
    <script src="http://ift.tt/1UratRT"></script>
    <script src="http://ift.tt/1OE6QAJ"></script>


    <script type="text/javascript">

        document.addEventListener("deviceready", onDeviceReady, false);

        var db;

        function onDeviceReady() {
            db = window.openDatabase("Database", "1.0", "Cordova Demo", 2*1024*1024);
            db.transaction(createDB, errorCB, successCB);

        }

        function createDB(tx) {
            //tx.executeSql('DROP TABLE IF EXISTS DEMO');
            tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (title, image, description)');

        }

        function errorCB(err) {
            alert("Error processing SQL: "+err.code);
        }

        function successCB() {
           alert("YEAH!!!!");
        }

        function insertDB(tx) {
            var _title = $("[name='title']").val();
            var _image = $("[name='image']").val();
            var _description = $("[name='description']").val();
            var sql = 'INSERT INTO DEMO (title, image, description) VALUES (?,?,?)';
            tx.executeSql(sql, [_title,_image,_description], sucessQueryDB, errorCB);

        }

        function sucessQueryDB(tx) {     
            tx.executeSql('SELECT * FROM DEMO', [], renderList, errorCB);
        }

        function renderList(tx,results) {
            var htmlstring = '';

            var len = results.rows.length;

            for (var i=0; i<len; i++){
                htmlstring += '<li>' + results.rows.item(i).title + '</li>';

            }

            $('#resultList').html(htmlstring);
            $('#resultList').listview('refresh');


        }

        function submitForm() {
            db.transaction(insertDB, errorCB);
            $.mobile.changePage( "#page2", { reverse: false, transition: "slide" } );
            return false;
        }


    </script>
      <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>

<body>
    <div data-role="page" id="page1" >
        <div data-role="header" >
            <h1>FORM</h1>
        </div>
        <div data-role="content"> 

            <form method="POST" onsubmit="return submitForm()" id="myForm" data-ajax="false">
                <lable for="title" class="ui-hidden-accessible">Title</lable><input type="text" name="title" placeholder="Title"><br>
                <input type="text" name="description" placeholder="description">

                <input type="submit" value="submit">
            </form>


        </div>

    </div>

    <div data-role="page" id="page2" data-add-back-btn="true">

        <div data-role="header" >

            <h1>Page Two</h1>
        </div>
        <div data-role="content"> 
            <div id="output">
            </div>

            <ul data-role="listview" id="resultList">
            </ul>

        </div>

    </div>


</body>

Aucun commentaire:

Enregistrer un commentaire