Question

我正在尝试使用HTML5，JavaScript，jqtouch和phonegap制作适用于移动健康的iPhone应用程序。我这样做是为了学习使用HTML5，jqtouch和phonegap构建iPhone应用程序的学校项目。

我的数据库有唯一的ID，pName和记录。我能够从数据库中检索一个完整的pName列表，能够在HTML5页面上填充列表。我无法从pName列表上的点击事件中检索数据库中的pName和记录。我只需要检索与列表中显示的pName相关联的pName和记录。

refreshEntries（）用于从数据库中检索所有数据并填充patientList面板上的整个pName列表。它还负责pName列表的onclick事件。

detailEntryById（id）选择与单击的pName关联的数据，并在患者面板中填充它。

index.html看起来像这样

          <div id="patientList">
      <div class="toolbar">
          <h1>patientList</h1>
          <a class="button slideup" href="#newEntry">+</a>
      </div>
      <ul class="edgetoedge">
             <li id="entryTemplate" class="arrow" style="display:none">
              <a href="#patient"><span class="label">Label</a></span>
          </li>

      </ul>
    </div>

             <div id="patient">
      <div class="toolbar">
          <a class="button back" href="#">Back</a>
          <h1 id ="patientHeading"  style="display:none">
              <span class="label1">Label</span>
          </h1>
          <a class="button edit" href="#editPatientRecord">Edit</a>
       </div>
     <br/>
      <form method="post">
         <img class="displayed" src="kilo.png" alt="patient photo" width="70" height="70" />
          <ul class="rounded">
              <li><input type="text" placeholder="patient record" name="record" id="record" 
              autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
          </ul>
           <ul class="rounded">
              <li><input type="submit" class="submit" name="action" 
                  value="Save Entry" /></li>
          </ul>
      </form>
  </div>

iPhone.js代码

              function refreshEntries() {
               $('#patientList ul li:gt(0)').remove();
                db.transaction(
                 function(transaction) {
                    transaction.executeSql(
                    'SELECT * FROM patientRecord1;',[], 
                      function (transaction, result) {
                      for (var i=0; i < result.rows.length; i++) {
                        var row = result.rows.item(i);
            var newEntryRow = $('#entryTemplate').clone();
                        newEntryRow.removeAttr('id');
                        newEntryRow.removeAttr('style');
                        newEntryRow.data('entryId', row.id);
                        newEntryRow.appendTo('#patientList ul');
                        newEntryRow.find('.label').text(row.pName);
                        newEntryRow.find('.label').click(function(){
                    var clickedEntry = $(this).parent();
            var clickedEntryId = clickedEntry.data('entryId');
                        detailEntryById(clickedEntryId);
                          }); // end of click function 
                     }     // end of for loop
                },       // end of function (transaction,result)
           errorHandler
             );       // end of transaction.executeSql
            }            // end of function transaction
         );          // end of db.transaction 
        }            // end of function refreshEntries

        function detailEntryById(id) {
         db.transaction(
           function(transaction) {
             transaction.executeSql('SELECT * FROM patientRecord1 WHERE id=?;', 
             [id],
         function(transaction, result){
       for (var i=0; i < result.rows.length; i++){
          var row = result.rows.item[i];
          var patientClicked = $('#patientHeading').clone();
          patientClicked.removeAttr('id');
                  patientClicked.removeAttr('style');
          patientClicked.appendTo('#patient h1');
          patientClicked.find('.label1').text(row.pName);
           } // end of for loop
          },  // end of function(transaction , result)
            errorHandler);  // end of executeSql
           }   // end of function transaction
          ); // end of db.transaction
        }

请告诉我我在哪里做错了。

Answer 1

您的代码有点难以阅读，因为格式不正确。

但首先：从SQL回调中删除您的点击绑定，并将其与$('#entryTemplate .label').live("click", function() {});分开应用。之后，使用console.dir()检查函数实际包含的结果。

Answer 2

感谢那些花时间看我的问题的观众。我终于让我的代码工作了。

在detailEntryById（id）函数中需要稍微改动

  function detailEntryById(id) {
     db.transaction(
       function(transaction) {
         transaction.executeSql('SELECT * FROM patientRecord1 WHERE id=?;', 
         [id],
     function(transaction, result){
     for (var i=0; i < result.rows.length; i++){
      var row = result.rows.item(i);
      $('#patient h1').removeAttr('id');
      $('#patient h1').removeAttr('style');
      $('#patient h1').text(row.pName);
           } // end of for loop
         },  // end of function(transaction , result)
       errorHandler);  // end of executeSql
     }   // end of function transaction
   ); // end of db.transaction
   }

如何在click事件中从数据库中检索值并使用（jqtouch + database + jquery）在HTML5中显示它

2 个答案: