3 Replies - 709 Views - Last Post: 10 April 2013 - 10:23 PM

#1 JJ1717  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 05-April 13

DELETING Database Values from HTML table? - AJAX/Javascript

Posted 10 April 2013 - 07:21 AM

Hello again,


I have a html table that displays database values. I have a function that should delete a value and the row from the table when the 'delete button' is pressed. Please can you someone help me solve the following error.

please see the link for working example of the above description: My link

Error in the console:

Uncaught ReferenceError: id is not defined Line ref: 135

Line 135 is:
myrow = document.getElementById ("DB" + id);





This is the Javascript/Ajax function

function deleteRecordCallback () 
{
	if (xmlHttpReq3.readyState == 4) 
	{            
        alert ("From Server (Delete Record):Delete.php" + xmlHttpReq3.responseText);
	}
	
	mytable = document.getElementById ("DBTable");
	myrow = document.getElementById ("DB" + id);
	mytable.removeChild (myrow); 
}


function deleteRecord (id)
{
    if (window.XMLHttpRequest) 
	{
        xmlHttpReq3 = new XMLHttpRequest ();
    }
    // IE
    else if (window.ActiveXObject) 
    {
        xmlHttpReq3 = new ActiveXObject ("Microsoft.XMLHTTP");
    }

    mydata = '?id=' + id; 

    alert ("To Server (Delete Record):Delete.php" + mydata);

    xmlHttpReq3.open ('GET', "Delete.php" + mydata, true);
    xmlHttpReq3.onreadystatechange = deleteRecordCallback;
    xmlHttpReq3.send (null);

}




This is the AppendRecord function which contains some delete information...

<script type="text/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);
}




The php script that has the delete query. The function calls the script.


<?php
 

  $link = mysql_connect ("194.81.104.22", "s10406206", "test");
  mysql_select_db ("db10406206");
 
  $id = $_GET['ID'];
      
  $query = "DELETE from XYZ where ID='$id'";
  $result = mysql_query ($query);
      
  $query = "SELECT * from XYZ where CARNAME='$carname' and FUELTYPE='$fueltype' and TRANSMISSION='$transmission' and ENGINESIZE='$enginesize' and DOORS='$doors' and TOTAL='$total' and AVAILABLE='$available'";	  
  $result = mysql_query ($query);
  
  header ("Content-Type: application/xml");
  print "<?xml version='1.0' encoding='ISO-8859-1'?>";
  print "<database>";
  for ($i = 0; $i < mysql_num_rows ($result); $i ++)
  {        
    $row = mysql_fetch_object ($result);

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




Finally the html table...

 <form name="f1">
    <input value="Load Database" type="button" onclick='loadDatabaseRecords()'></p>
  </form>
  
   <form name="myform">
  <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>
     <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>
     </tr>
  </table>
  </form>




There is one particular person who has worked on this development before. (Andrew).

I believe this should be a simpler fix than the errors I received before. I just do not understand why 'id' is not defined and some help with this specific area could be a benefit to me.

anything would be appreciated

thanks.

Is This A Good Question/Topic? 0
  • +

Replies To: DELETING Database Values from HTML table? - AJAX/Javascript

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3392
  • View blog
  • Posts: 9,589
  • Joined: 08-June 10

Re: DELETING Database Values from HTML table? - AJAX/Javascript

Posted 10 April 2013 - 07:24 AM

the error is correct, I canít find a place where id is defined or set.
Was This Post Helpful? 0
  • +
  • -

#3 JJ1717  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 05-April 13

Re: DELETING Database Values from HTML table? - AJAX/Javascript

Posted 10 April 2013 - 07:26 AM

This must be my problem.. I do not know why or where to define or set id?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3392
  • View blog
  • Posts: 9,589
  • Joined: 08-June 10

Re: DELETING Database Values from HTML table? - AJAX/Javascript

Posted 10 April 2013 - 10:23 PM

I see two options
- directly incorporate the event handler into your AJAX code (Closure)
- pass the ID through the XMLHttpRequest object (e.g. XMLHttpRequest.requestId)
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1