6 Replies Latest reply on May 30, 2017 11:50 PM by godilo

    database storage in my phonegap app

    godilo

      I am trying to test database storage in my phonegap app.  I tested it with Ripple Emulator and it worked fine.  But when i uploaded it to my phonegap build account and rebuilt it.  I installed in my android phone but the database storage is not working.  Please can any help me to figure what the problem is? Below is my code:

       

      <!DOCTYPE html>

      <html>

      <head>

      <title>database storage</title>

      <meta name='viewport' content='width=device-width, initial-scale=1'>

      <!-- Main Page

      Include the jQuery and jQuery Mobile JavaScript files:

      -->

      <link href="jquery-mobile/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>

      <link rel="stylesheet" href="css/jqm.css" />

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

       

       

      <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>

      <script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></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 + '<br>' + results.rows.item(i).description + '</li>';

                          

                      }

                      

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

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

                      

                      

                  }

       

                  function submitForm() {

                      db.transaction(insertDB, errorCB);

                      $.mobile.changePage( "#page2", { reverse: false, transition: "slide" } );

                      return false;

                  }

       

       

              </script>

              

       

       

      </head>

      <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">

                          <lable for="title" class="ui-hidden-accessible">Title</lable><input type="text" name="title" placeholder="Title"><br>

                          <lable for="image" class="ui-hidden-accessible">Image</lable><input type="text" name="image" placeholder="image URI"><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>

      </html>

        • 1. Re: database storage in my phonegap app
          kerrishotts Adobe Community Professional

          And what is the problem specifically? Error messages, etc. would be helpful here; it's unlikely we're going to be able to diagnose the problem just from a code dump.

          • 2. Re: database storage in my phonegap app
            godilo Level 1

            Thanks Kerrishotts for your interest in helping me out.  The problem is that when i tested it with Ripple Emulator that works with google chrome it worked as i espected, I entered data in my form and submitted I was able to view the recorded that i submitted.

            Then i uploaded the same testing project to my phonegap build account and rebuilt it.  I downloaded the project to my android phone and opened the form area, entered records and submitted.  I did not see the records that i submitted.

             

            Please carefully go through the sample code i am trying to see how database work in phonegap app.  Thanks.

            • 3. Re: database storage in my phonegap app
              José Jesús Pérez Rivas Adobe Community Professional (Moderator)

              Hi godilo

               

              The database that is using a WebSQL. This database is compatible with current browsers and devices.

               

              To see what error there is, you can debug your device using Chrome. Just activate the option for remote devices and allow the error. You can see as in the screenshot that I share.

              Captura de pantalla 2017-05-28 a las 9.30.44.png

               

              Can you share a screenshot of the error that appears to you?

               

              Regards!

              • 4. Re: database storage in my phonegap app
                godilo Level 1

                Hi

                Thanks for assisting me.  I was not able to screenshot i don't really know why but below is the message i got when i enabled remote devices in chrome:

                 

                Console was cleared

                ?enableripple=cordova:165 Ripple :: Environment Warming Up (Tea. Earl Gray. Hot.)

                ?enableripple=cordova:165 cordova :: Setting the user agent server side failed.

                ?enableripple=cordova:165 cordova :: Initialization Finished (Make it so.)

                2?enableripple=cordova:165 cordova :: fired deviceready event!

                 

                Thanks

                • 5. Re: database storage in my phonegap app
                  kerrishotts Adobe Community Professional

                  Erm, I don't see that you're sourcing "cordova.js" in your index.html file. You must do so in order for Cordova plugins to work correctly.

                  • 6. Re: database storage in my phonegap app
                    godilo Level 1

                    Thanks  a lot Kerrishotts.  I did exactly what you asked me to do and it worked perfectly. I included "cordova.js" in the page and the database storage worked. Thanks once more.