5 Replies Latest reply on Mar 19, 2016 3:55 PM by kerrishotts

    can somebody tell me how can i make a phonegap jquerymobile listview in sqlite?

    Kevin10000

      Can somebody tell me how can i make a phonegap jquerymobile listview in sqlite?


      Any sample would be awesome thanks in advance.

        • 2. Re: can somebody tell me how can i make a phonegap jquerymobile listview in sqlite?
          Kevin10000 Level 1

          Hi, thank you for posting, and yes I have tried that example and it looks awesome but I tried to download the code and it shows that it's no longer to download. I tried to build the code but a am having issues with it.

          • 3. Re: can somebody tell me how can i make a phonegap jquerymobile listview in sqlite?
            Kevin10000 Level 1

            I have this right now I need to finish my code, if somebody can help me i will be thankful.

             

            <!DOCTYPE html>

            <html>

            <head>

              <meta charset="utf-8" />     

                    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=medium-dpi" />

              <meta name="format-detection" content="telephone=no" />

                    <link rel="stylesheet" type="text/css" href="css/index.css" />

              <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

              <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

              <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

                <script src="js/local-storage.js"></script>

                <script src="js/app.js"></script>

              <script type="text/javascript">

              function onDeviceReady(){

            var db = window.openDatabase("Database","1.0","Database Sqlite",200000);

            db.transaction(populateDB, errorCB, successCB);

            }

             

             

            //Populate Database

            function populateDB(tx){

            tx.executeSql('DROP TABLE IF EXIST SQLITE');

            tx.executeSql('CREATE TABLE IF NOT EXIST SQLITE (id unique, data, katerangan, picture, uraian, manfat)');

            tx.executeSql('INSERT INTO SQLITE,(id, data, keterangan, picture, uraian, manfaat') VALUES(1, "Control A", "Ini

            keterangan", "img", "Ini uraian", "Ini Manfaat")");

            tx.executeSql('INSERT INTO SQLITE,(id, data, keterangan, picture, uraian, manfaat') VALUES(2, "Control B", "Ini

            keterangan","img", "Ini uraian", "Ini Manfaat")");

            tx.executeSql('INSERT INTO SQLITE,(id, data, keterangan, picture, uraian, manfaat') VALUES(3, "Control C", "Ini

            keterangan","img", "Ini uraian", "Ini Manfaat")");

            tx.executeSql('INSERT INTO SQLITE,(id, data, keterangan, picture, uraian, manfaat') VALUES(4, "Control D", "Ini

            keterangan","img", "Ini uraian", "Ini Manfaat")");

            }

             

             

            function errorCB(err){

            alert("Error procesing SQL: " +err);

            }

             

             

            function successCB() {

            $(document).ready(function(){

              db=window.openDatabase("Database", "1.0", "Database Sqlite",200000);

              db.transaction(queryDB, errorCB);

              function queryDB(trans){

              console.log("Query DB");

              trans.executeSql('SELECT + FROM SQLITE',[], querySuccess);

            }

            function querySuccess(trans, results) {

            console.log("Results DB");

            var len = results.rows.length;

            var s = '';

            for (var i=0; i<len; i++){

            $("#list").append("<li><a href="#"+results.rows.item(i).id+"'data-transition = 'none'>

            (i).id+"</h3><p>"+results.rows.item(i).data+"</p></a></li>");

            $("body").append

            ("<div id='"+results.rows.item(i).id+"' class='detail'data-role='page-one')

            data-content-theme='c'><div data-role='header' data-theme='c'><h3>"+res

            data-icon='arrow=l'

             

             

             

             

             

             

             

             

             

             

            }

            $("#list").listview();

            }

            });

            }

            </script>

             

             

             

             

             

             

             

             

            </head>

            <body onload="onDeviceReady();">

            <div id= "example=list" data=role="page" data=theme="b" data=content=theme="a">

            <div data-role="header" id="headerku" data-theme="a">

            <h3>WEPA</h3>

            </div>

            <div id="Kontenko">

            <ul id="list" data-insert="false" data-filter="true" data-theme="d" data-divider-theme>

            data-filter-placeholder="Search demos..." data-global-nav="demos" class="jqm-list">

              </ul>

              </div>

            </div>

            </body>

            </html>

            • 4. Re: can somebody tell me how can i make a phonegap jquerymobile listview in sqlite?
              Kevin10000 Level 1

              <!DOCTYPE html>

              <html>

              <head>

                <meta charset="utf-8" />     

                      <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=medium-dpi" />

                <meta name="format-detection" content="telephone=no" />

                      <link rel="stylesheet" type="text/css" href="css/index.css" />

                <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

                <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

                <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

                  <script src="js/local-storage.js"></script>

                  <script src="js/app.js"></script>

                <script type="text/javascript">

                function onDeviceReady(){

              var db = window.openDatabase("Database","1.0","Database Sqlite",200000);

              db.transaction(populateDB, errorCB, successCB);

              }

               

               

              //Populate Database

              function populateDB(tx){

              tx.executeSql('DROP TABLE IF EXIST SQLITE');

              tx.executeSql('CREATE TABLE IF NOT EXIST SQLITE (id unique, data, katerangan, picture, uraian, manfat)');

              tx.executeSql('INSERT INTO SQLITE,(id, data, keterangan, picture, uraian, manfaat') VALUES(1, "Control A", "Ini

              keterangan", "img", "Ini uraian", "Ini Manfaat")");

              tx.executeSql('INSERT INTO SQLITE,(id, data, keterangan, picture, uraian, manfaat') VALUES(2, "Control B", "Ini

              keterangan","img", "Ini uraian", "Ini Manfaat")");

              tx.executeSql('INSERT INTO SQLITE,(id, data, keterangan, picture, uraian, manfaat') VALUES(3, "Control C", "Ini

              keterangan","img", "Ini uraian", "Ini Manfaat")");

              tx.executeSql('INSERT INTO SQLITE,(id, data, keterangan, picture, uraian, manfaat') VALUES(4, "Control D", "Ini

              keterangan","img", "Ini uraian", "Ini Manfaat")");

              }

               

               

              function errorCB(err){

              alert("Error procesing SQL: " +err);

              }

               

               

              function successCB() {

              $(document).ready(function(){

                db=window.openDatabase("Database", "1.0", "Database Sqlite",200000);

                db.transaction(queryDB, errorCB);

                function queryDB(trans){

                console.log("Query DB");

                trans.executeSql('SELECT + FROM SQLITE',[], querySuccess);

              }

              function querySuccess(trans, results) {

              console.log("Results DB");

              var len = results.rows.length;

              var s = '';

              for (var i=0; i<len; i++){

              $("#list").append("<li><a href="#"+results.rows.item(i).id+"'data-transition = 'none'>

              (i).id+"</h3><p>"+results.rows.item(i).data+"</p></a></li>");

              $("body").append

              ("<div id='"+results.rows.item(i).id+"' class='detail'data-role='page-one')

              data-content-theme='c'><div data-role='header' data-theme='c'><h3>"+res

              data-icon='arrow=l'

               

               

               

               

               

               

               

               

               

               

              }

              $("#list").listview();

              }

              });

              }

              </script>

               

               

               

               

               

               

               

               

              </head>

              <body onload="onDeviceReady();">

              <div id= "example=list" data=role="page" data=theme="b" data=content=theme="a">

              <div data-role="header" id="headerku" data-theme="a">

              <h3>WEPA</h3>

              </div>

              <div id="Kontenko">

              <ul id="list" data-insert="false" data-filter="true" data-theme="d" data-divider-theme>

              data-filter-placeholder="Search demos..." data-global-nav="demos" class="jqm-list">

                </ul>

                </div>

              </div>

              </body>

              </html>

              • 5. Re: can somebody tell me how can i make a phonegap jquerymobile listview in sqlite?
                kerrishotts Adobe Community Professional

                It might help if you described exactly what problems you are having with the above code. Also, please wrap it in a code block -- click "Use advanced editor" in the upper-right corner of your reply editor, then click the ">>" icon. Select "Syntax Highlighting" and then select a language. I see some potential errors, but with the code as presented, it's hard to tell if it is simply due to the lack of formatting or an actual syntax error.

                 

                You might also want to consider GitHub - litehelpers/cordova-sqlite-ext: A Cordova/PhoneGap plugin to open and use sqlite databases on Android/iOS/Windo… -- this lets you avoid the Web SQL storage limitations and also enables a pre-populated database (so you don't have to litter your code with SQL statements that will only be executed once).

                 

                As to creating a list from a SQL query, this might help -- I'm not trying to duplicate your code, however, and I haven't tested it -- this is off-the-cuff.

                 

                var someOtherElement = document.querySelector("#listToPopulate");
                
                db.transaction(function execQuery(tx) {
                    tx.executeSql("SELECT * FROM someTable", [], function(tx, results) {
                        if (results.rows && results.rows.length>0) {
                            var someList = document.createElement("ul");
                            for (let i = 0, l = results.rows.length; i < l; i++) {
                                var someListItem = document.createElement("li");
                                someListItem.textContent = results.rows.item(i);
                                someList.appendChild(someListItem);
                            }
                            someOtherElement.appendChild(someList);
                
                        }
                   });
                });