1

我在使用 Phonegap 访问数据库时遇到了一些问题。我正在使用 phonegap Build 在多个平台上进行部署。有趣的是，我的代码在模拟器（Ripple）中完美运行，但在设备上失败（带有 Android 4.0.3 的三星 Galaxy SII）。

这是我的 Index.html：

<!DOCTYPE HTML>
<html>
<head>
  <script>
      function goToMain(url)
      {
        var url = url;
        var username=document.getElementById('username');
        var password=document.getElementById('password');
        if(username.value == '' && password.value== '')
        {
                   document.form.action = "./main.html";
        }
        else
        {
            alert('No válido');
        }
    return ;
      };


     // Wait for PhoneGap to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // PhoneGap is ready
    //
    function onDeviceReady() {
    var db = window.openDatabase("test", "1.0", "Test DB", 10000000);
    db.transaction(populateDB, errorCB, successCB);
    };

 // Transaction error callback
    //
    function errorCB(tx, err) {
    alert("Error processing SQL: "+err);
    };

    // Transaction success callback
    //
    function successCB() {
    };

    function isTableExists(tx, tableName, callback) {
    tx.executeSql('SELECT * FROM '+tableName, [], function(tx, resultSet) {
        if (resultSet.rows.length <= 0) {
            callback(false);
        } else {
            callback(true);
        }
    }, function(err) {
        callback(false);
    })
    };

    function populateDB(tx) {

     isTableExists(tx, "invoices", function(status) {
        if (!status) {
           tx.executeSql('CREATE TABLE IF NOT EXISTS "invoices" ("id" INTEGER PRIMARY KEY  AUTOINCREMENT  NOT NULL  UNIQUE , "month" INTEGER NOT NULL , "year" INTEGER, "client" INTEGER, "amount" FLOAT, "tax" FLOAT);');
    tx.executeSql('INSERT INTO "invoices" VALUES(1,1,2,1,1500,21);');
    tx.executeSql('INSERT INTO "invoices" VALUES(2,2,1,2,2500,16);');
    tx.executeSql('INSERT INTO "invoices" VALUES(3,10,1,3,3500,21);');
    tx.executeSql('INSERT INTO "invoices" VALUES(4,5,4,1,10500,21);');
    tx.executeSql('INSERT INTO "invoices" VALUES(5,4,2,2,15500,21);');
    tx.executeSql('INSERT INTO "invoices" VALUES(6,1,4,4,134200,21);');
        } 
    });

isTableExists(tx, "clients", function(status) {
        if (!status) {
          tx.executeSql('CREATE TABLE IF NOT EXISTS"clients" ("id" INTEGER PRIMARY KEY  AUTOINCREMENT  NOT NULL  UNIQUE , "name" VARCHAR);');
    tx.executeSql('INSERT INTO "clients" VALUES(1,"Alfonso");');
    tx.executeSql('INSERT INTO "clients" VALUES(2,"Alejandro");');
    tx.executeSql('INSERT INTO "clients" VALUES(3,"Ricardo");');
    tx.executeSql('INSERT INTO "clients" VALUES(4,"Víctor");');
        } 
    });



    isTableExists(tx, "months", function(status) {
        if (!status) {
       tx.executeSql('CREATE TABLE IF NOT EXISTS "months" ("id" INTEGER PRIMARY KEY  AUTOINCREMENT  NOT NULL  UNIQUE , "name" VARCHAR);');
    tx.executeSql('INSERT INTO "months" VALUES(1,"January");');
    tx.executeSql('INSERT INTO "months" VALUES(2,"February");');
    tx.executeSql('INSERT INTO "months" VALUES(3,"March");');

    tx.executeSql('INSERT INTO "months" VALUES(4,"April");');
    tx.executeSql('INSERT INTO "months" VALUES(5,"May");');
    tx.executeSql('INSERT INTO "months" VALUES(6,"June");');
    tx.executeSql('INSERT INTO "months" VALUES(7,"July");');
    tx.executeSql('INSERT INTO "months" VALUES(8,"August");');
    tx.executeSql('INSERT INTO "months" VALUES(9,"September");');
    tx.executeSql('INSERT INTO "months" VALUES(10,"October");');
    tx.executeSql('INSERT INTO "months" VALUES(11,"November");');
    tx.executeSql('INSERT INTO "months" VALUES(12,"December");');
        } 
    });

isTableExists(tx, "years", function(status) {
        if (!status) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS "years" ("id" INTEGER PRIMARY KEY  AUTOINCREMENT  NOT NULL  UNIQUE , "year" INTEGER);');
    tx.executeSql('INSERT INTO "years" VALUES(1,2009);');
    tx.executeSql('INSERT INTO "years" VALUES(2,2010);');
    tx.executeSql('INSERT INTO "years" VALUES(3,2011);');
    tx.executeSql('INSERT INTO "years" VALUES(4,2012);');
        } 
    });
    }

  </script>
  <meta name="viewport" content="width=320; user-scalable=no">
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>Auth Demo</title>
  <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0rc2.css"
 type="text/css" charset="utf-8">
  <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
  <script type="text/javascript" charset="utf-8"
<script src="phonegap.js"></script> 
  <script src="jquery.mobile/jquery.mobile-1.0rc2.js"></script>
</head>
<body onload="init()">
<div id="loginPage" data-role="page">
<div data-role="header">
<h1>Demo</h1>
</div>
<div data-role="content">
<form id="loginForm" onsubmit="goToMain('./main.html')" method="post"
 action="" name="form">
  <div data-role="fieldcontain" class="ui-hide-label"> <label
 for="username">Username:</label> <input name="username" id="username"
 value="" placeholder="Username" type="text"> </div>
  <div data-role="fieldcontain" class="ui-hide-label"> <label
 for="password">Password:</label> <input name="password" id="password"
 value="" placeholder="Password" type="password"> </div>
  <input value="Login" id="submitButton" type="submit"> </form>
</div>
<div data-role="footer">
<h4>© Ontic</h4>
</div>
</div>
</body>
</html>

当我单击按钮时，它会移动到下一个屏幕，在那里我会自动收到“未定义”错误：

        <!DOCTYPE html> 
    <html> 
        <head> 
        <meta name="viewport" content="width=device-width, initial-scale=1">    
        <title></title> 
        <link rel="stylesheet" href="js/jquery.mobile-1.0.min.css" />
        <script  src="js/jquery-1.6.4.min.js"></script>
        <script src="js/jquery.mobile-1.0.min.js"></script>
    <script src="phonegap.js"></script>

    <script>
    var dbShell;
    var s;
    var txt;
        document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady(){
        //First, open our db
        dbShell = window.openDatabase("test", "1.0", "Test DB", 10000000);
        //run transaction to create initial tables
    try
    {
        getEntries();
     }
        catch(err)
          {
          alert(err.code);
      } 
    }


    function getEntries() {
        dbShell.transaction(function(tx) {
        tx.executeSql("select id, name from clients",[],renderEntries,dbErrorHandler);
        tx.executeSql("select id, year from years",[],renderEntriesYears,dbErrorHandler);

        }, dbErrorHandler);
    }


    function dbErrorHandler(err){
        alert("DB Error: "+err.message + "\nCode="+err.code);
    }


    function renderEntries(tx,results){
    try{
        $("#entryText").html("<p>  You currently do not have any clients.</p>");
           s = "<p> These are your clients: </p>";
           for(var i=0; i<results.rows.length; i++) {
        alert("inside3");
        var  name= results.rows.item(i).name;
        var id = results.rows.item(i).id;
        s += "<li><a href=\"clientsinvoices.html?id="+id+"&ref=0\">" + name + "</a></li>";   
          }
        $("#linksList").html(s);
        $("#linksList").listview("refresh");

      }
        catch(err)
          {
          txt="There are no invoices for this client\n\n";
          txt+="Click OK to continue.\n\n";
          alert(txt);
      }

    }

    function renderEntriesYears(tx,results){
    try{
        $("#entryText").html("<p>  You currently do not have any clients.</p>");
           s += "<p> These are your years: </p>";
           for(var i=0; i<results.rows.length; i++) {
        var  name= results.rows.item(i).year;
        var id = results.rows.item(i).id;
        s += "<li><a href=\"clientsinvoices.html?id="+id+"&ref=1\">" + name + "</a></li>";   
          }
        $("#linksList").html(s);
        $("#linksList").listview("refresh");
      }
        catch(err)
          {
          alert("catchs");
          txt="There are no invoices for this year\n\n";
          txt+="Click OK to continue.\n\n";
          alert(txt);
      }
    }

    </script>
    </head> 
    <body > 

    <div data-role="page" id="mainPage" style="background-image:url('images/back.jpg');">

        <div data-role="header">
        <h1></h1>
        </div>

        <div data-role="content">  
            <div id="status"></div>  
        <ul id="linksList" data-role="listview" data-inset="true"></ul>
        </div>

        <div data-role="footer">
        <h4></h4>
        </div>


    </div>

    <div data-role="page" id="contentPage" style="background-image:url('images/back.jpg');" >

        <div data-role="header">
        <a href="#mainPage" data-rel="back">Home</a>
        <h1></h1>
        </div>

        <div data-role="content" id="entryText">
        </div>

    </div>

    </body>
    </html>
4

1 回答 1

1

最后，我设法使用我通过谷歌找到的解决方法使其工作，这是有效的代码：

索引.html

   <!DOCTYPE HTML>
      <html>
        <head>

        <script>
       /*
       * Licensed to the Apache Software Foundation (ASF) under one
       * or more contributor license agreements.  See the NOTICE file
       * distributed with this work for additional information
       * regarding copyright ownership.  The ASF licenses this file
       * to you under the Apache License, Version 2.0 (the
       * "License"); you may not use this file except in compliance
       * with the License.  You may obtain a copy of the License at
       *
       * http://www.apache.org/licenses/LICENSE-2.0
       *
       * Unless required by applicable law or agreed to in writing,
       * software distributed under the License is distributed on an
       * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
       * KIND, either express or implied.  See the License for the
       * specific language governing permissions and limitations
       * under the License.
       */
      var app = {
          // Application Constructor
          initialize: function() {
              this.bindEvents();
          },
          // Bind Event Listeners
          //
          // Bind any events that are required on startup. Common events are:
          // 'load', 'deviceready', 'offline', and 'online'.
          bindEvents: function() {
              document.addEventListener('deviceready', this.onDeviceReady, false);
          },
          // deviceready Event Handler
          //
          // The scope of 'this' is the event. In order to call the 'receivedEvent'
          // function, we must explicity call 'app.receivedEvent(...);'
          onDeviceReady: function() {

              app.receivedEvent('deviceready');

          },
          // Update DOM on a Received Event
          receivedEvent: function(id) {
               var db = window.openDatabase("test", "1.0", "Test DB", 10000000);
             db.transaction(populateDB, errorCB, successCB);
          }
      };
            function goToMain(url)
            {
            var url = url;
            var username=document.getElementById('username');
            var password=document.getElementById('password');
            if(username.value == '' && password.value== '')
            {
                             document.form.action = "main.html";
            }
            else
            {
                alert('No valid');
            }
        return ;
            };

       // Transaction error callback
          //
          function errorCB(tx, err) {
              alert("Error processing SQL: "+err);
          };

          // Transaction success callback
          //
          function successCB() { 
          };

        function isTableExists(tx, tableName, callback) {
              tx.executeSql('SELECT * FROM '+tableName, [], function(tx, resultSet) {
                  if (resultSet.rows.length <= 0) {
                      callback(false);
                  } else {
                      callback(true);
                  }
              }, function(err) {
                  callback(false);
              })
        };

        function populateDB(tx) {

         isTableExists(tx, "invoices", function(status) {
                  if (!status) {
                     tx.executeSql('CREATE TABLE IF NOT EXISTS "invoices" ("id" INTEGER PRIMARY KEY  AUTOINCREMENT  NOT NULL  UNIQUE , "month" INTEGER NOT NULL , "year" INTEGER, "client" INTEGER, "amount" FLOAT, "tax" FLOAT);');
        tx.executeSql('INSERT INTO "invoices" VALUES(1,1,2,1,1500,21);');
        tx.executeSql('INSERT INTO "invoices" VALUES(2,2,1,2,2500,16);');
        tx.executeSql('INSERT INTO "invoices" VALUES(3,10,1,3,3500,21);');
        tx.executeSql('INSERT INTO "invoices" VALUES(4,5,4,1,10500,21);');
        tx.executeSql('INSERT INTO "invoices" VALUES(5,4,2,2,15500,21);');
        tx.executeSql('INSERT INTO "invoices" VALUES(6,1,4,4,134200,21);');
                  } 
              });

      isTableExists(tx, "clients", function(status) {
                  if (!status) {
                    tx.executeSql('CREATE TABLE IF NOT EXISTS"clients" ("id" INTEGER PRIMARY KEY  AUTOINCREMENT  NOT NULL  UNIQUE , "name" VARCHAR);');
        tx.executeSql('INSERT INTO "clients" VALUES(1,"Alfonso");');
        tx.executeSql('INSERT INTO "clients" VALUES(2,"Alejandro");');
        tx.executeSql('INSERT INTO "clients" VALUES(3,"Ricardo");');
        tx.executeSql('INSERT INTO "clients" VALUES(4,"Víctor");');
                  } 
              });



        isTableExists(tx, "months", function(status) {
                  if (!status) {
                 tx.executeSql('CREATE TABLE IF NOT EXISTS "months" ("id" INTEGER PRIMARY KEY  AUTOINCREMENT  NOT NULL  UNIQUE , "name" VARCHAR);');
        tx.executeSql('INSERT INTO "months" VALUES(1,"January");');
        tx.executeSql('INSERT INTO "months" VALUES(2,"February");');
        tx.executeSql('INSERT INTO "months" VALUES(3,"March");');

        tx.executeSql('INSERT INTO "months" VALUES(4,"April");');
        tx.executeSql('INSERT INTO "months" VALUES(5,"May");');
        tx.executeSql('INSERT INTO "months" VALUES(6,"June");');
        tx.executeSql('INSERT INTO "months" VALUES(7,"July");');
        tx.executeSql('INSERT INTO "months" VALUES(8,"August");');
        tx.executeSql('INSERT INTO "months" VALUES(9,"September");');
        tx.executeSql('INSERT INTO "months" VALUES(10,"October");');
        tx.executeSql('INSERT INTO "months" VALUES(11,"November");');
        tx.executeSql('INSERT INTO "months" VALUES(12,"December");');
                  } 
              });

      isTableExists(tx, "years", function(status) {
                  if (!status) {
                    tx.executeSql('CREATE TABLE IF NOT EXISTS "years" ("id" INTEGER PRIMARY KEY  AUTOINCREMENT  NOT NULL  UNIQUE , "year" INTEGER);');
        tx.executeSql('INSERT INTO "years" VALUES(1,2009);');
        tx.executeSql('INSERT INTO "years" VALUES(2,2010);');
        tx.executeSql('INSERT INTO "years" VALUES(3,2011);');
        tx.executeSql('INSERT INTO "years" VALUES(4,2012);');
                  } 
              });


          }

        </script>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
              <meta name="format-detection" content="telephone=no" />
              <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
               <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0rc2.css"
       type="text/css" charset="utf-8">

       <link media="all" href="docucss.css" type= "text/css" rel="stylesheet" />

        <title>Mobile Bussiness App</title>
        <script type="text/javascript" src="cordova-2.2.0.js"></script>
              <script type="text/javascript">
                  app.initialize();
              </script>


      </head>
      <body>
      <div id="loginPage" data-role="page">
      <div data-role="header">
      <img src="images/login.jpg" alt="Login" height="42" width="42">
      <h1 class="title">Mobile Bussiness App</h1>


      </div>
      <div data-role="content">
      <form id="loginForm" onsubmit="goToMain('./main.html')" method="post"
       action="" name="form">
        <div data-role="fieldcontain" class="ui-hide-label"> <label
       for="username">Username:</label> <input name="username" id="username"
       value="" placeholder="Username" type="text"> </div>
        <div data-role="fieldcontain" class="ui-hide-label"> <label
       for="password">Password:</label> <input name="password" id="password"
       value="" placeholder="Password" type="password"> </div>
        <input value="Login" id="submitButton" type="submit"> </form>
      </div>
      <div data-role="footer">
      <h4>© MBA</h4>
      </div>
      </div>
      </body>
      </html>

和 main.html：

<!DOCTYPE html> 
        <html> 
            <head> 
               <link rel="stylesheet" href="js/jquery.mobile-1.0.min.css" />

              <script type="text/javascript" src="js/xui-2.3.2.js"></script>

        <script>

        var dbShell;
        var s;

        /*
         * Licensed to the Apache Software Foundation (ASF) under one
         * or more contributor license agreements.  See the NOTICE file
         * distributed with this work for additional information
         * regarding copyright ownership.  The ASF licenses this file
         * to you under the Apache License, Version 2.0 (the
         * "License"); you may not use this file except in compliance
         * with the License.  You may obtain a copy of the License at
         *
         * http://www.apache.org/licenses/LICENSE-2.0
         *
         * Unless required by applicable law or agreed to in writing,
         * software distributed under the License is distributed on an
         * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
         * KIND, either express or impylied.  See the License for the
         * specific language governing permissions and limitations
         * under the License.
         */
        var app = {
            // Application Constructor
            initialize: function() {
                this.bindEvents();

            },
            // Bind Event Listeners
            //
            // Bind any events that are required on startup. Common events are:
            // 'load', 'deviceready', 'offline', and 'online'.
            bindEvents: function() {
                document.addEventListener('deviceready', this.onDeviceReady, false);
            },
            // deviceready Event Handler
            //
            // The scope of 'this' is the event. In order to call the 'receivedEvent'
            // function, we must explicity call 'app.receivedEvent(...);'
            onDeviceReady: function() {
                app.receivedEvent('deviceready');

            },
            // Update DOM on a Received Event
            receivedEvent: function(id) {
                dbShell = window.openDatabase("test", "1.0", "Test DB", 10000000);
                getEntries(); 
                    }
        };

        function getEntries() {
            //doLog("get entries");
            dbShell.transaction(function(tx) {
                tx.executeSql("select id, name from clients",[],renderEntries,dbErrorHandler);
            tx.executeSql("select id, year from years",[],renderEntriesYears,dbErrorHandler);

            }, dbErrorHandler);
        }


        function dbErrorHandler(err){
            alert("DB Error: "+err.message + "\nCode="+err.code);
        }


        function renderEntries(tx,results){
        try{
                $("#entryText").html("<p>  You currently do not have any clients.</p>");

               s = "<p class=\"title2\"> These are your clients: </p>";
               for(var i=0; i<results.rows.length; i++) {
            var  name= results.rows.item(i).name;
            var id = results.rows.item(i).id;
                s += "<li><a href=\"clientsinvoices.html?id="+id+"&ref=0\" data-transition=\"slide\" rel=\"external\">" + name + "</a></li>";   
        //  alert(s);
              }
            $("#linksList").html(s);
            $("#linksList").listview("refresh");

          }
            catch(err)
              {
              txt="There are no invoices for this client\n\n" + err;
              txt+="Click OK to continue.\n\n";
              alert(txt);
          }

        }

        function renderEntriesYears(tx,results){
           // doLog("render entries");
         // if (results.rows.length < 1) {
        try{
                $("#entryText").html("<p>  You currently do not have any clients.</p>");
          // } else {
               s += "<p class=\"title2\"> These are your years: </p>";
               for(var i=0; i<results.rows.length; i++) {
            var  name= results.rows.item(i).year;
            var id = results.rows.item(i).id;
                s += "<li><a href=\"clientsinvoices.html?id="+id+"&ref=1\" data-transition=\"slide\" rel=\"external\">" + name + "</a></li>";   
        //  alert(s);
              }
            $("#linksList").html(s);
            $("#linksList").listview("refresh");
          }
            catch(err)
              {
              txt="There are no invoices for this year\n\n"+ err;
              txt+="Click OK to continue.\n\n";
              alert(txt);
          }
        }

        </script>

          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <meta name="format-detection" content="telephone=no" />

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

                 <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0rc2.css"
         type="text/css" charset="utf-8">

          <link media="all" href="docucss.css" type= "text/css" rel="stylesheet" />


          <title class="title">Mobile Business App</title>
          <script type="text/javascript" src="cordova-2.2.0.js"></script>
                <script type="text/javascript">
                    app.initialize();
                </script>


        </head> 
        <body > 

        <div  data-role="page" id="mainPage" style="background-image:url('images/back.jpg');">

               <h1 class="title">Clients And Years</h1>

            <div data-role="content">  
                <div id="status"></div>  
                <ul id="linksList" data-role="listview" data-inset="true"></ul>




            </div>



        </div>

        <div data-role="page" id="contentPage" style="background-image:url('images/back.jpg');" >

            <div data-role="header">
                  <a href="./index.html" data-rel="back">Home</a>
            </div>

            <div data-role="content" id="entryText">
            </div>

        </div>

        </body>
        </html>

感谢所有帮助过我的人！

问候！

于 2012-12-21T10:01:12.187 回答