Delete a Record with animation fade-out effect using jQuery and Ajax.

Delete a Record with animation fade-out effect using jQuery and Ajax.

Page 1 of 1

2 Replies - 3853 Views - Last Post: 21 January 2009 - 10:27 AM

#1 foxscan  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 25-December 08

Delete a Record with animation fade-out effect using jQuery and Ajax.

Posted 21 January 2009 - 12:37 AM

Are you like Twitter and Yammer API? This post about how to delete a record with animation fade-out effect using Ajax and jQuery. I like Twitter API very much, it's clean and faster. So i prepared this jQuery tutorial delete action with out refreshing page.

*LINK REMOVED*
Is This A Good Question/Topic? 0
  • +

Replies To: Delete a Record with animation fade-out effect using jQuery and Ajax.

#2 girasquid  Icon User is offline

  • Barbarbar
  • member icon

Reputation: 108
  • View blog
  • Posts: 1,825
  • Joined: 03-October 06

Re: Delete a Record with animation fade-out effect using jQuery and Ajax.

Posted 21 January 2009 - 10:19 AM

If you want to animate the background color of something using jQuery, you'll need to use the jQuery Color Plugin - otherwise, your call to animate() for the background-color is useless.
Was This Post Helpful? 0
  • +
  • -

#3 teampoop  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 17
  • View blog
  • Posts: 140
  • Joined: 19-June 08

Re: Delete a Record with animation fade-out effect using jQuery and Ajax.

Posted 21 January 2009 - 10:27 AM

Nice tutorial. The only recommendation I would give is that you make sure the deletion happens before actually fading out the item. This can be done with a simple JSON return and using the $.getJSON functionality.

So for your delete.php, I would do something like
<?php
header('Content-type: text/json');
include("dbconfig.php");
$return = "OK";
if($_POST['id']) {
  $id=$_POST['id'];
  $sql = "delete from {$prefix}updates where ms_id='$id'";
  $r = mysql_query( $sql);
  if (!$r) $return = "DB ERROR"
  else if (mysql_affected_rows($r) == 0) $return = "No rows deleted";
} else $return = "Nothing to delete";
?>
{"return": "<?php echo $return?>"}



And for your javascript action, I would change it to
$(".delbutton").click(function(){
  info = {} // object to pass
  info['id'] = element.attr("id"); // sets info;
  if (confirm("You sure?")){
	$.getJSON("delete.php", info, function(json){
	  if (json.return == "OK") {
		$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
		.animate({ opacity: "hide" }, "slow");
	  } else alert (json.return);
	});
  }
  return false;
});



Of course the way you did it was perfectly fine, this is just a suggestion.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1