How to retrieve a value from database on click event and display it in HTML5 using (jqtouch+database+jquery)

Question

I am trying to make an iPhone application for mobile health using HTML5, JavaScript, jqtouch and phonegap. I am doing this as a school project to learn building an iPhone app using HTML5, jqtouch and phonegap.

My Database has a unique id, pName and a record. I am able to retrieve a complete list of pName from database able to populate on HTML5 page as list. I am not able to retrieve the pName and record from the database on click event made on the list of pName. I just need to retrieve the pName and record associated with the pName shown on the list.

The refreshEntries() is used to retrieve all the data from the database and to populate the entire pName list on patientList panel. It also takes care of onclick event of the pName list.

The detailEntryById(id) pick the data associated with the pName clicked and populate it in the patient panel.

index.html looks like this

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

              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
        }

Please tell me where I am doing wrong.

Answer 1

Thank you the viewers who ever took time in looking at my problem. I finally got my code working.

And a little bit change was needed in the detailEntryById(id) function

  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
   }

Answer 2

Your code is bit hard to read since it's not properly formatted.

But first of all: remove your click binding from the SQL callback and apply it separately with $('#entryTemplate .label').live("click", function() {});. After that, check in the function with console.dir() what your result set actually contains.