Steve Tinsley
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:
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);
}
ASKER
Where tho???
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Just add a Manipulation Function, here some tutorials:
http://davidwalsh.name/animated-ajax-jquery
http://jquery-howto.blogspot.com/2009/05/remove-table-row-on-user-click.html
http://sarfraznawaz.wordpress.com/2009/09/14/deleting-table-rows-using-jquery-and-php/
I hope that my answer helps you!