Delete Row Animation WordPress Style In jQuery + Adding MySQL Delete

/ jQuery, Wordpress / by Paul Robinson / 18 Comments
This post was published back on February 19, 2009 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

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:

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:

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:

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:

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.


Author’s gravatar

This is good. I already have a wordpress comment thing that removes commments etc, but it doesn’t actually do anything yet other than the animation so this is really usful as I will integrate this with mine.

Author’s gravatar

Hey. I couldn’t get through to this page the other day. Anyone else had the problem?

Author’s gravatar author

If you mean you could not get the site to load it could have been because we’ve been getting attacked by hackers a lot recently. Everything should be ok now though. 😉

Author’s gravatar


Again, I’m trying to do this for the front-end of things. Everything is dandy except for the ever-dreaded Responce 0 :/

Note that

doesn’t throw me a bone. I simply get response 0.

Any thoughts?

Author’s gravatar author

Ok. Not sure where that 0 is coming from as there is nothing in your code that seems to be able to produce that.

Again though as this is function receiving data via AJAX I would add in a nonce & verify it via check_ajax_referer() before even attempting to delete a row so external requests can’t trigger a deletion.

I’ve never made a AJAX call to admin-ajax.php without providing a nonce so maybe it is refusing your AJAX request (returning 0) because no nonce is being verified. Although I’m not sure about that.

Also just another little thing I noticed, you have wrote:

That is slightly backwards, you should probably use:

Hope that makes sense. 😉

I’ll check a few more things out about why your code could be giving back 0, but let me know if you find anything else in the meantime. 🙂

Author’s gravatar

nonce… that’s a whole new can of worms opened for links.

I’ve been staring at this all day, I’m sure it’s the solution. Now, I’m just too bug eyed to figure thinks out. Methinks it’s time for a brewski.

Author’s gravatar author

Well it’s pretty much the same as your insert function. Send the nonce with your form using wp_create_nonce(); and then verify it in your delete function using check_ajax_referer();.

I think a brewski is indeed in order. 😉 If you noticed the site was down about 5-10 minutes ago I apologise, someone overloaded the server & I had to get onto the admins to get it sorted. All done now though. 😀

Author’s gravatar

I have to build a form instead, I can’t get my head around wp_nonce_url makes no sense to my pea sized brain 🙂

Author’s gravatar author

Ahhh ok if you don’t have a form, it is a little different, but not by much. I’m going to assume you are using a click event to make a text link trigger the delete command via AJAX.

To send across the extra data, in this case the nonce you could do this:

Something like that should do the trick. The return false is just there to stop the href from submitting (if you used an href).

Hope that helps & let me know how it goes. 😉

Author’s gravatar

AAAH, yes. Obviously, just add what needs to be sent where it’s being sent from! Thanks for getting in the fray 🙂

Now, only one slight thing,

doesn’t return anything in wpsec:, so I made a function instead and echoed that, which works.

But I still get response 0 :/

As you, I can’t see where we should get 0. Here’s the code:

Author’s gravatar

I’ve also tried

check_ajax_referer(‘something’, ‘wpsec’);
check_ajax_referer(‘wpsec’, ‘something’);

all response 0 🙁

Author’s gravatar author

Forgot to mention that without sending an action in the $_POST array WP won’t have a clue what PHP function to call, exactly the same as you form on your insert code.

So in this case you need to add an extra post value to your jQuery ajax call. The key would be action and the value playlist_data_delete.

Author’s gravatar

Thank you so much, that did it! I’ll make sure to send you another donation, imacs are cool and so are you.

Author’s gravatar

please Demo and download link

Author’s gravatar author

The demo link is at the bottom of the post, and I can’t give a download link as the code needs to be integrated into your own application/code.

Older Comments
Newer Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more