Database Values into HTML table - AJAX

[Joey17]

Hello,

         New here so apologies if I commit any rule breaks regarding posting. 

 

I have been given basic javascript functions with in a HTML page that is supposed to fetch values from a already created database and input these values into the table on the page. 

 

Please see this link as an example: http://www.eng.nene.ac.uk/~10406206/CSY2028/Ajax/Ajax.html

 

As you can see there is a table with headers. When the 'Load Database' button is clicked the function is supposed to load the database values into the correct cells. However this does not happen. There is an alert which displays correct information from the database but the values do not get entered into the table? I need to know why this is the case as I have no idea where to go to fix this. 

 

Edit: The alert was displaying my database values but now it is not. No errors displaying in the console. 

 

 

I am new to Javascript and Ajax coding so I apologise in advance. 

 

 

Below is the Javascript Functions.

 

<script language="Javascript">

var xmlHttpReq = false;
var xmlHttpReq2 = false;
var xmlHttpReq3 = false;

function appendRecord (id, carname, fueltype, transmission, enginesize, doors, total, available)
{
	//rowcount ++;
	
	//if (firstname == "") return;
	
	mytable = document.getElementById ("DBTable");
	
	mycurrent_row = document.createElement ("tr");
	mycurrent_row.setAttribute ("id", "DB"+id);
	
	mycurrent_cell = document.createElement ("td");
	currenttext = document.createTextNode (id);
	mycurrent_cell.appendChild (currenttext);
	mycurrent_row.appendChild (mycurrent_cell);

	mycurrent_cell = document.createElement ("td");
	currenttext = document.createTextNode (carname);
	mycurrent_cell.appendChild (currenttext);
	mycurrent_row.appendChild (mycurrent_cell);
	
	mycurrent_cell = document.createElement ("td");
	currenttext = document.createTextNode (fueltype);
	mycurrent_cell.appendChild (currenttext);
	mycurrent_row.appendChild (mycurrent_cell);
	
	mycurrent_cell = document.createElement ("td");
	currenttext = document.createTextNode (transmission);
	mycurrent_cell.appendChild (currenttext);
	mycurrent_row.appendChild (mycurrent_cell);
	
	mycurrent_cell = document.createElement ("td");
	currenttext = document.createTextNode (enginesize);
	mycurrent_cell.appendChild (currenttext);
	mycurrent_row.appendChild (mycurrent_cell);
	
	mycurrent_cell = document.createElement ("td");
	currenttext = document.createTextNode (doors);
	mycurrent_cell.appendChild (currenttext);
	mycurrent_row.appendChild (mycurrent_cell);
	
	mycurrent_cell = document.createElement ("td");
	currenttext = document.createTextNode (total);
	mycurrent_cell.appendChild (currenttext);
	mycurrent_row.appendChild (mycurrent_cell);
	
	mycurrent_cell = document.createElement ("td");
	currenttext = document.createTextNode (available);
	mycurrent_cell.appendChild (currenttext);
	mycurrent_row.appendChild (mycurrent_cell);
	
	mycurrent_cell = document.createElement ("td");
	mycurrent_input = document.createElement ("input");
	mycurrent_input.setAttribute ("type", "button");
	mycurrent_input.setAttribute ("value", "modify");
	mycurrent_input.setAttribute ("onclick", "modifyOrUpdateRecord (" + id + ", this)");
	mycurrent_cell.appendChild (mycurrent_input);
	mycurrent_row.appendChild (mycurrent_cell);
	
	mycurrent_cell = document.createElement ("td");
	mycurrent_input = document.createElement ("input");
	mycurrent_input.setAttribute ("type", "button");
	mycurrent_input.setAttribute ("value", "delete");
	mycurrent_input.setAttribute ("onclick", "deleteRecord (" + id + ")");
	mycurrent_cell.appendChild (mycurrent_input);
	mycurrent_row.appendChild (mycurrent_cell);
	
	mytable.appendChild (mycurrent_row);
}


function loadDatabaseRecordsCallback () 
{
	if (xmlHttpReq.readyState == 4) 
	{            
        alert ("From Server (Load Records):\n" + xmlHttpReq.responseText);
        
		var record = xmlHttpReq.responseXML.getElementsByTagName('record');
		var s = "";
		for (var i = 0; i < record.length; i ++)
		{
			var rec = record[i];
            	
			var id = rec.getElementsByTagName("ID")[0].firstChild.data;
			var carname = rec.getElementsByTagName("CARNAME")[0].firstChild.data;
			var fueltype = rec.getElementsByTagName("FUELTYPE")[0].firstChild.data;
			var transmission = rec.getElementsByTagName("TRANSMISSION")[0].firstChild.data;
			var enginesize = rec.getElementsByTagName("ENGINESIZE")[0].firstChild.data;
			var doors = rec.getElementsByTagName("DOORS")[0].firstChild.data;
			var total = rec.getElementsByTagName("TOTAL")[0].firstChild.data;
			var available = rec.getElementsByTagName("AVAILBLE")[0].firstChild.data;
			appendRecord (id, carname, fueltype, transmission, enginesize, doors, total, available);
		}
	}
}

function loadDatabaseRecords () 
{
    // Mozilla/Safari
    if (window.XMLHttpRequest) 
    {
        xmlHttpReq = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) 
    {
        xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    alert ("To Server (Load Records):\n\nload.php");
    
    xmlHttpReq.open('GET', "load.php", true);
    xmlHttpReq.onreadystatechange = loadDatabaseRecordsCallback; 
    xmlHttpReq.send(null);
}

 

 

 

The loaddatabaserecords function calls the load.php file which is below 

 

 

<?php
  $link = mysql_connect ("194.81.104.22", "xxxx", "xxxxx");
  mysql_select_db ("db10406206");

  $query = "SELECT * from XYZ";
  $result = mysql_query ($query);
  
  header ("Content-Type: application/xml");
  print ("<?xml version=\"1.0\" ?>");
  print "\n<database>\n";
  for ($i = 0; $i < mysql_num_rows ($result); $i ++)
  {        
    $row = mysql_fetch_object ($result);

    print " <record>\n";
    print "  <id>$row->ID</id>\n";
    print "  <carname>$row->CARNAME</carname>\n";
    print "  <fueltype>$row->FUELTYPE</fueltype>\n";
    print "  <transmission>$row->TRANSMISSION</transmission>\n";
    print "  <enginesize>$row->ENGINESIZE</enginesize>\n";
	print "  <doors>$row->DOORS</doors>\n";
    print "  <total>$row->TOTAL</total>\n";
    print "  <available>$row->AVAILABLE</available>\n";
    print " </record>\n";
  }
  print "</database>\n";
  mysql_close ($link);
?>
 

 

 

Finally this is the html table etc etc. 

 

 

  <form name="f1">
    <input value="Load Database" type="button" onclick='JavaScript:loadDatabaseRecords()'></p>
  </form>
  <table id="DBTable"  border="2">
    <tr>
      <td width="20">ID</td>
      <td width="100">Car Name</td>
      <td width="100">Fuel Type</td>
      <td width="100">Transmission</td>
      <td width="80">Engine size</td>
	  <td width="20">Doors</td>
	  <td width="20">Total</td>
      <td width="20">Available</td>
     </tr>
     <form name="myform">
     <tr>
      <td><input type="text" name="id"></td>
      <td><input type="text" name="carname"></td>
      <td><input type="text" name="fueltype"></td>
      <td><input type="text" name="transmission"></td>
	  <td><input type="text" name="enginesize"></td>
      <td><input type="text" name="doors"></td>
      <td><input type="text" name="total"></td>
	  <td><input type="text" name="available"></td>
      <td colspan="2"><input type="button" value="add" onClick="JavaScript:addNewRecord()"></td>
	  <td colspan="2"><input type="checkbox" value="update" onClick="JavaScript:updateRecord()"></td>
	  <td colspan="2"><input type="checkbox" value="delete" onClick="JavaScript:deleteRecord()"></td>
     </tr>
     </form>
  </table>

 

 

So, I just want to know whats going wrong. I have spent so many hours researching how to get my database values into the html table. The only responses I have had so far is to display the data in other ways etc. However, i need to display the values in the table as there is other functions that will use the information. 

 

Any help would be greatly appreciated. 

 

Thanks. 

 

Joey

Edited April 2, 2013 by Joey17