Link to home
Start Free TrialLog in
Avatar of Steve Tinsley
Steve TinsleyFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Remove data from table using Ajax

I have a table with data that has bee accessed from a mysql database with php.
I have added a delete button on the end of each line and used ajax to delete the record from the data base.

The problem is that it doesnt update the table without me refreshing (f5) the page.

What I would idealilly like is for the row to slide up using jquery but I havent used this before...


Here is my current code:
<html>
<body>
<script src="ajax.js"></script>
</body>

</head>




<body>

<?php
//-----MYSQL QUERY-----
$query = "SELECT * FROM agenda";
$result = mysql_query($query);


//-----DISPLAYS "Processing..."-----
?>
<div name="response" id="response"></div> 



<table>
    <tr>
      <td>#</td>
      <td>Start Time</td>
      <td>Finish Time</td>
      <td>Duration</td>
      <td>Location</td>
      <td>Title</td>
      <td>Speaker</td>
      <td></td>
    </tr>


<?php
//-----START OF WHILE LOOP-----

	while($row = dbFetchAssoc($result)) {
		extract($row);
?>


    <tr>
      <td><?php echo $id; ?></td>
      <td><?php echo $startTime; ?></td>
      <td><?php echo $finishTime; ?></td>
      <td><?php echo $duration ?></td>
      <td><?php echo $location ?></td>
      <td><?php echo $title ?></td>
      <td><?php echo $speaker ?></td>
      <td><a href="edit.php?id=<?php echo $id; ?>">Edit</a>
      
      <br />
      
<a href="javascript:setContent('deleteAgenda','<?php echo $id; ?>');" id="<?php echo $id; ?>">Delete</a>

      </td>
      <?php
	} // end while
	?>
  </table>



  

</div>
<!-- wrap finished here -->
</body>
</html>


--------AJAX CODE---------------------------



// Customise those settings

var divid = "response";
var url = "process.php";
var del_id = element.attr("id");


////////////////////////////////
//
// Setting DIV innerHTML
//
////////////////////////////////

function setContent(action,elementid){

// The XMLHttpRequest object

var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX.");
return false;
}
}
}

// Timestamp for preventing IE caching the GET request

fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// The code...

xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState!=4){

// Working
document.getElementById(divid).innerHTML='Processing...';
}
if(xmlHttp.readyState==4){

// Finished. Return response...
document.getElementById(divid).innerHTML=xmlHttp.responseText;
}
}
xmlHttp.open("GET",nocacheurl+"&action="+action+"&elementid="+elementid,true); //THIS LINE CALLS PROCESS.PHP WHICH DELETES THE RECORD FROM THE DATABASE
xmlHttp.send(null);



}

Open in new window

Avatar of VanHackman
VanHackman
Flag of El Salvador image

Avatar of Steve Tinsley

ASKER

Where tho???
ASKER CERTIFIED SOLUTION
Avatar of kadaba
kadaba
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial