Как извлечь значение из базы данных по событию клика и отобразить его в HTML5, используя (jqtouch + database + jquery) - PullRequest
Новая
       19

Как извлечь значение из базы данных по событию клика и отобразить его в HTML5, используя (jqtouch + database + jquery)

2 голосов
/ 21 марта 2012

Я пытаюсь сделать приложение для iPhone для мобильного здравоохранения, используя HTML5, JavaScript, jqtouch и phonegap. Я делаю это как школьный проект, чтобы научиться создавать приложения для iPhone с использованием HTML5, jqtouch и phonegap.

Моя база данных имеет уникальный идентификатор, pName и запись. Я могу получить полный список pName из базы данных, способной заполнить страницу HTML5 в виде списка. Я не могу получить pName и запись из базы данных по событию click, сделанному в списке pName. Мне просто нужно получить pName и запись, связанную с pName, показанным в списке.

refreshEntries () используется для извлечения всех данных из базы данных и для заполнения всего списка pName на панели PatientList. Он также заботится о событии onclick в списке pName.

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
        }

Пожалуйста, скажите мне, где я делаю неправильно.

Ответы [ 2 ]

0 голосов
/ 24 марта 2012

Спасибо зрителям, которые когда-либо смотрели на мою проблему. Я наконец-то получил свой код работает.

И нужно было внести небольшое изменение в функцию 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
   }
0 голосов
/ 21 марта 2012

Ваш код немного сложен для чтения, поскольку он не отформатирован должным образом.

Но прежде всего: удалите привязку кликов из обратного вызова SQL и примените ее отдельно с $('#entryTemplate .label').live("click", function() {});.После этого отметьте в функции console.dir(), что фактически содержит ваш результирующий набор.

...