Как да извлечете стойност от база данни и да я покажете в html5 с помощта на (jqtouch+phonegap)

Опитвам се да направя приложение за Iphone за мобилно здраве с помощта на html5, javascript, jqtouch и phonegap. Правя това като училищен проект, за да се науча да създавам приложение за iPhone с помощта на html5 jqtouch и phonegap.

Мога да създам база данни с pName като колона в таблицата на базата данни. Но не мога да попълня целия списък с имената на пациентите в празен div (първият панел с име "pacientList") в index.html.

Направих един файл с име index.html. Този файл има различни панели. Първият панел е панел за списък на пациенти. Вторият панел е за създаване на нов запис в база данни. След като създам нов запис в базата данни, първият панел с име списък с пациенти трябва да попълни всички имена на пациента. Моят код създава успешно база данни, но не показва име на пациентите (pName) в панела PatientList.

Създавам приложение за iphone, използвайки HTML5, CSS, JAVASCRIPT И JQTOUCH И PHONEGAP за първи път. Трябва ми помощта ти.

Моят index.html изглежда така

<div id="patientList">
      <div class="toolbar">
          <h1>patientList</h1>
          <a class="button slideup" href="/bg#newEntry">+</a>
      </div>
      <ul class="edgetoedge">

          <li id="entryTemplate" class="entry" style="display:none">
              <span class="label">Label</span>

          </li>

      </ul>
  </div>
  <div id="newEntry">
      <div class="toolbar">
          <a class="button cancel" href="/bg#">Cancel</a>
          <h1>New Patient</h1>
          <a class="button save" href="/bg#">Save</a>

      </div>

      <br/>

       <form method="post" >
          <ul class="rounded">
              <li><input type="text" placeholder="Patient Name" 
                  name="PatientName" id="PatientName" autocapitalize="off" 
                  autocorrect="off" autocomplete="off" /></li>
          </ul>
             <a class="button add" onclick="addNewMedicine()"style="size:12">+</a> 
          </ul>
           <div id="empty" class="rounded">
           </div>
          <ul class="rounded">
              <li><input type="submit" class="submit" name="action" 
                  value="Save Entry" /></li>
          </ul>
      </form>
  </div>

Моят iphone.js изглежда така

     var jQT = new $.jQTouch({
           });

  var db;

    $(document).ready(function(){
       $('#newEntry form').submit(createEntry);
       $('#patientList li a').click(function(){
       var nameOffset = this.id;
       sessionStorage.currentName = nameOffset; // storing the clicked patient name
       refreshEntries();
      });

   // creating a database with name PatientDataBase and which has the table named patientRecord1

   var shortName = 'patientDataBase';
    var version = '1.0';
    var displayName = 'patientDataBase';
    var maxSize = 65536;
    db = openDatabase(shortName, version, displayName, maxSize);
    db.transaction(
       function(transaction) {
          transaction.executeSql(
             'CREATE TABLE IF NOT EXISTS patientRecord1 ' +
            '  (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
            '  pName TEXT NOT NULL);'
              );
           }
        );
     });


  // Function created a new enty in the database table patientRecord1 
   function createEntry() {
         var pName = $('#PatientName').val();
         db.transaction(
         function(transaction) {
         transaction.executeSql(
         'INSERT INTO patientRecord1 (pName) VALUES (?);', 
          [pName], 
          function(){
           refreshEntries();
           jQT.goBack();
         }, 
        errorHandler
       );
     }
   );
    return false;
  }
      // this function is used to retrive the data from the table and populate in the html pannel named patientList

     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);
                  }
               }, 
       errorHandler
         );
     }
    ); 
   }

        function errorHandler(transaction, error) {
         alert('Oops. Error was '+error.message+' (Code '+error.code+')');
         return true;
     }

Моля, кажете ми къде греша.


person ssharma    schedule 19.03.2012    source източник
comment
просто предложение. защо навлизате в дребните неща на sql. използвайте обвивка като кресло, за да се справите с това вместо вас. просто запазете json и го извлечете.   -  person ghostCoder    schedule 20.03.2012


Отговори (1)


Заменете функцията си refreshEntries() със следното:

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);
            }
        }, errorHandler);
    });
}

Пропуснали сте масив от параметри в аргумента на executeSql. Сложих новия код в цигулка тук

person dhaval    schedule 20.03.2012
comment
Благодаря ти много Dhaval. След вашия отговор мога да видя своя списък с pName в PatientList. Бяхте абсолютно прав, липсваше ми само масивът param в аргумента на executeSql. Просто добавих ,[] и всичко започна да работи. Благодаря ви още веднъж - person ssharma; 22.03.2012