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.

i thought it is already answered here stackoverflow.com/questions/9777992/… — dhaval
– dhaval, Commented Mar 22, 2012 at 9:02
@dhaval thank you for taking the look at my question. This question is related to the same project whose answer you have given in the previous link. The previous question i asked was to display pname in the patientList. that i am now successfully able to retrive but this is a different problem.In this after the list of name is successfully displayed, on click of a particular pname the detailEntryById(id) function recognizes the clicked pname and display the entire data associated to that clicked pname present in the patientList pannel. i tried to write but this doesn't work. plz try to ans.tku — ssharma
– ssharma, Commented Mar 23, 2012 at 7:01

Samuli Hakoniemi · Accepted Answer · 2012-03-21 12:07:20Z

0

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.

answered Mar 21, 2012 at 12:07

Samuli Hakoniemi

19.1k1 gold badge64 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ssharma · Accepted Answer · 2012-03-24 01:10:39Z

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
   }

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related