Delete Row Animation WordPress Style In jQuery + Adding MySQL Delete

by Paul Robinson on 02.19.2009 | 18 comments

Ok, so yesterday I did a tutorial about making a animation similar to that which WordPress uses when you delete posts etc. You know the [...]

Ok, so yesterday I did a tutorial about making a animation similar to that which WordPress uses when you delete posts etc. You know the fade to red & slide up thing… Yep? Good.

Well I didn’t include how to add the ajax so that it could actually delete since I thought it would be fairly easy for everyone to do themselves… Boy, I was wrong. For the novice jQuery coder it actually turns out to be a little bit difficult. So starting off from the end of the last post, here is how to add ajax so that you can actually delete stuff.

A little note: I make use of the mysqli class which is built into PHP, you can use mysql, but I’m not going to cover that since if I find mysqli to be a lot better and neater.

Let’s Get To It

When we last saw the javascript it looked like this:

$(function(){
	$('.box a').click(function() {
		$(this).parents('div.box').animate( { backgroundColor: '#cb5555' }, 500).animate( { height: 0, paddingTop: 0, paddingBottom: 0 }, 500, function() {
			$(this).css( { 'display' : 'none' } );
		});
	});
});

That Funky PHP Code – Listing

Well that just won’t do it, but first we need to swap out our hard coded HTML for some funky PHP script. Remember you need a database and some data to show, I can’t help you out with that though. Here is the code I use to show some rows:

<?php
//Right at the top of the page. Yes, even above the DOCTYPE
$mysql = new mysqli('localhost', 'root', '', 'wp-delete-ani');
?>
<?php
//In where the content will go.
$result = $mysql->query('SELECT * FROM `wp-delete-ani`', MYSQLI_STORE_RESULT);
while(list($id, $text) = $result->fetch_row()) {
	echo '<div class="box" id="delete-'.$id.'"><a href="#">delete</a><strong>'.$text.'</strong></div>';
}
?>

Right that should do it. Of course you need to change the login data and query to suit your database, but again only you can work that one out. Also if you need to change the HTML output you’ll have to do that too. The code is pretty basic, but I’ll go over it quickly. We query the database, I use list to store the info into pre-named variables. You could however use the classic $row = $result->fetch_row(); method to get $row as an array with all your data in it.

There is one thing about the HTML that is very, very important. For the code to work correctly jQuery needs some way of getting the id from the database so it can tell PHP which row to delete. That is what the id="delete-'.$id.'" bit is for. More on what jQuery does with that a little later.

That Funky PHP Code – Deletion

Ok, now we need to write the PHP that acts on deletion. I have attached it to the top of my display page, but it’s probably best put on another page. Here’s what I have:

//Remember me above the DOCTYPE...
$mysql = new mysqli('localhost', 'root', '', 'wp-delete-ani');
//This is the new deletion stuff...
if(isset($_POST['ajax'])) {
	if(isset($_POST['id'])) {
		$id = (int)$_POST['id'];
		if($mysql->query("DELETE FROM `wp-delete-ani` WHERE id = ".$id)) {
			echo 'excellent';
			exit(0);
		}
	}
}

This is also pretty simple. We’ll be making the jQuery post an ajax variable & the id to delete so that we know to act on ajax and not load the page content. We check for that variable, if it’s there then we look for an id in the POST array. As secure as POST generally is, it sometimes isn’t secure enough so we store id in a variable $id and typecase it using (int) that means it will always end up as an integer. There’s probably a better way to do that, such as using is_numeric() to check if it is a string number first, but this will do for this example. We finally run the query, which again will have to be customised but the basic structure is the same, in an if to see if it returns true or not. You could have it do something on failure if you like. If it works we echo something so we can see the output in Firebug for debugging and exit to stop PHP in it’s tracks so we don’t get all the HTML in our AJAX request.

Changing The jQuery

So we need to change the jQuery a little. Let’s see what it looks like after the changes:

$(function(){
	$('.box a').click(function() {
		id = $(this).parents('div.box').attr('id');
		id = id.replace(/delete-/, "");
		el = $(this);
		$.post('jquery-wp-delete.php', { id: id, ajax: 'true' }, function() {
			$(el).parents('div.box')
			.animate( { backgroundColor: '#cb5555' }, 500)
			.animate( { height: 0, paddingTop: 0, paddingBottom: 0 }, 500, function() {
				$(this).css( { 'display' : 'none' } );
			});
		});
	});
});

Different huh? Ok, let’s go through it a bit. We have the click function again. Next, because we need an id to give to PHP, we grab the id attibute of the div that is the parent of the link we clicked. I hope that makes sense. We then use javascript’s replace to find delete- from the id which looked like delete-4 so we end up with just the number. Next we assign the scope of this to a variable for use later.

Then we make the AJAX call via POST. I’ve called back to the same page, but I’d advise putting the delete code on a seperate file. We give data in the form of the id we got before, plus we send a variable ajax with the value true so we can tell it was from an AJAX call. Then we put the animation from before into the callback of the AJAX call which is only ran if the AJAX call didn’t fail. The animation is the same except for the start which instead of saying $(this) we change it to $(el) since $(this) does not have the same scope as it did before.

Hopefully that all makes sense. I can’t give an example of the MySQL part working, but here is a link to the example of the animation from before.