SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Don't know why JS database does not show values in field

    Through the magic of innerHTML, a div id="results" is filled with the database results. For the life of me, I can't figure out why 'undefined" is filling the space instead. When I look at Google Developer Tools, the database records are filled in properly. Otherwise, there are no errors shown in Google Console.

    Can someone look this over and tell me what needs to be defined? It has to be something simple, because I did this earlier and it worked perfectly.

    Code:
    <script> 
     var results = document.getElementById('results'); 
     var exportResults = document.getElementById('exportResults');
     var edit = document.getElementById('edit');
     var id = document.getElementById('id');
     var dairyDate = document.getElementById('dairyDate');  
     var dairyNewSounds = document.getElementById('dairyNewSounds'); 
     var dairyProblemSounds = document.getElementById('dairyProblemSounds'); 
     var dairySettings = document.getElementById('dairySettings'); 
       
     var createStatement = "CREATE TABLE IF NOT EXISTS Dairy (id INTEGER PRIMARY KEY AUTOINCREMENT, dairyDate TEXT, dairyNewSounds TEXT, dairyProblemSounds TEXT, dairySettings TEXT)";
     var selectAllStatement = "SELECT * FROM Dairy";
     var insertStatement = "INSERT INTO Dairy (dairyDate, dairyNewSounds, dairyProblemSounds, dairySettings) VALUES (?, ?, ?, ?)";
     var updateStatement = "UPDATE Dairy SET dairyDate=?, dairyNewSounds=?, dairyProblemSounds=?, dairySettings = ? WHERE id = ?";
     var deleteStatement = "DELETE FROM Dairy WHERE id=?";
     var dropStatement = "DROP TABLE Dairy";
    
     var db = openDatabase("Dairy", "1.0", "Dairy", 200000);
     var dataset;
     createTable();
    
          function onError(tx, error) {
            alert(error.message);
          }
          
          function showRecords() {
            results.innerHTML = '';
            var db = openDatabase("Dairy", "1.0", "Dairy", 200000);
            db.transaction(function(tx) {
              tx.executeSql(selectAllStatement, [], function(tx, result) {
    dataset = result.rows;
                for (var i = 0, item = null; i < dataset.length; i++) {
                  item = dataset.item(i);
                  results.innerHTML += 
    '<li class="listing"><button class="glossaryButton2" onClick="loadRecord('+i+')">Edit</button>  ' +  
     '<button  class="glossaryButtonDel" style="float:right;" onClick="deleteRecord('+item['id']+')">Delete</button><br><span class="termStyle">' + item['term'] + '</span><br><span class="defStyle">' + item['definition'] + '</span> <br></li>';
    }
              });
            }); exportRecords(); /* populates the hidden span so it's ready to export. */
          }
    
    
          
    function createTable() { 
    	var db = openDatabase("Dairy", "1.0", "Dairy", 200000);
    	db.transaction(function(tx) {
    		tx.executeSql(createStatement, [], showRecords, onError);
    	});
    }
          
    function insertRecord() {
    	var db = openDatabase("Dairy", "1.0", "Dairy", 200000);
    	db.transaction(function(tx) {
    		tx.executeSql(insertStatement, [dairyDate.value, dairyNewSounds.value, dairyProblemSounds.value, dairySettings.value], loadAndReset, onError);
        });
    }
    
    /* This edit function will highlight fields and show button for updating */     
    function loadRecord(i) {
    	var item = dataset.item(i); 
    	dairyDate.value = item['dairyDate'];
    	dairyNewSounds.value = item['dairyNewSounds'];
    	dairyProblemSounds.value = item['dairyProblemSounds'];
    	dairySettings.value = item['dairySettings'];
    	id.value = item['id']; 
     edit.innerHTML = "<div class='pageitem'><div class='textbox' style='background-color:yellow;'><p class='term'>Editing Record <span class='editingButton;'><button class='glossaryButton2' onClick='updateRecord()'>Update</button></span></p></div></div><style type='text/css'>#dairyDate,#dairyNewSounds,#dairyProblemSounds,#dairySettings\{ background-color:yellow;\}</style>";
    }
    
    function updateRecord() {
    	var db = openDatabase("Dairy", "1.0", "Dairy", 200000);
    	db.transaction(function(tx) {
    		tx.executeSql(updateStatement, [dairyDate.value, dairyNewSounds.value, dairyProblemSounds.value, dairySettings.value, id.value], loadAndReset, onError);
        });  edit.innerHTML = "";
    }
          
    function alertAbout() {
    	alert("Enter a record of the sounds you heard day by day. Enter new sounds you experienced, and sounds you had a problem with. \nUse the Edit button to keep adding entries to that day's record. \nNote what settings were used that day; this may give clues as to what may need to be changed. \nExport via email to show a copy to your audiologist or to store a record.");
    }
          
    function confirmation() {
    	var answer = confirm("WARNING: You are about to ERASE EVERY ENTRY ON THIS PAGE that you entered. Action cannot be undone. Continue?")
    		if (answer){
    			dropTable();
    		}
    		else{
    			showRecords();
    		}
    }
          
    function deleteRecord(id) {
    	var db = openDatabase("Dairy", "1.0", "Dairy", 200000);
    	db.transaction(function(tx) {
    		tx.executeSql(deleteStatement, [id], showRecords, onError);
        });
    	resetForm();
    }
           
    function dropTable() {
    	var db = openDatabase("Dairy", "1.0", "Dairy", 200000);
    	db.transaction(function(tx) {
    		tx.executeSql(dropStatement, [], showRecords, onError);
        });
    	resetForm();
    }
    
    function loadAndReset(){
    	resetForm();
    	showRecords();
     }
    
    function resetForm(){
    	dairyDate.value = '';
    	dairyNewSounds.value = '';
    	dairyProblemSounds.value = '';
    	dairySettings.value = '';
    	id.value = ''; 
     }
    </script>
    The HTML looks like this (snippet):

    HTML Code:
    <div id="edit"></div>  <!-- "Editing" stuff goes in here -->
      
    <div id="container">
       
         <input type="hidden" id="id"/>
         <input type="text" id="dairyDate" placeholder="Date">
         <button class="glossaryButton1" onClick="alertAbout()">About</button>
         <br><br>
         <textarea type="text" id="dairyNewSounds" placeholder="New Sounds"></textarea>
         <br><br>
         <textarea type="text" id="dairyProblemSounds" placeholder="Problem Sounds"></textarea>
         <br><br>
         <textarea type="text" id="dairySettings" placeholder="Processor Settings"></textarea>
    
         <div id="buttonRow" style="clear:both;float:left;">
         	<button class="glossaryButton1" onClick="insertRecord()">Add</button>
         	<button class="glossaryButton1" onClick="resetForm()">Clear</button>
         	<button class="glossaryButton1" onClick="emailExp()">Export</button>
            <button class="glossaryButtonDelAll" onClick="confirmation()">Delete All</button>
         </div>
    </div>
    		<div style="clear:both; padding:1em 0"</div>
    </div>
    
    <div class="pageitem">
    	<div class="textbox">        
    		<div id="results"></div> <!-- Visible HTML-formatted results go in here. -->
    	</div></div>
    This code was adapted from
    http://cookbooks.adobe.com/post_Stor...ase-19115.html
    Steve Husting

  2. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,316
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The function showRecords is the code that should be producing the text in the div. I figure something in there needs to be defined, and so is producing "undefined" in both fields in the "results" id.
    Steve Husting


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •