[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 890
  • Last Modified:

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

0
Steve Tinsley
Asked:
Steve Tinsley
1 Solution
 
Steve TinsleyAuthor Commented:
Where tho???
0
 
kadabaCommented:
Have you used jquery before in your website?

You can reduce your code a lot, you can follow the third link posted in the initial post.

jquery :
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

for now you can  have these two lines along with the above line of code

var trObj = $(elementid).parent().parent();
trObj.fadeOut('slow',function(){trObj.remove();});

the above lines of code should be after
// Finished. Return response...
document.getElementById(divid).innerHTML=xmlHttp.responseText;

give it a shot.
0

Featured Post

2018 Annual Membership Survey

Here at Experts Exchange, we strive to give members the best experience. Help us improve the site by taking this survey today! (Bonus: Be entered to win a great tech prize for participating!)

Tackle projects and never again get stuck behind a technical roadblock.
Join Now