Greetings my fellow readers,
While using WordPress, I’ve seen a very cool effect when I either approved or deleted comments. When you click “Delete” it uses AJAX to call the PHP script that will perform the action as well as highlighting that row with a fading color change effect. If you are a web developer and need to implement a similar approach in your scripts (using AJAX with UI state effect) then this post is for you.
We’ll need jQuery and jQuery UI Effects (for the background fading) libraries for this.
First, let’s create a table with some rows, each having “approve” and “delete” links.
CSS Code
body { font-size:12px; font-family:verdana; }
h2 { font-size:16px; }
a { color: #2A4480; }
a.approve { color:green; background: url('icons/accept.png') no-repeat scroll 0 0 transparent; padding: 0 0 3px 22px; }
a.approve:hover { text-decoration:none; }
a.unapprove { color: #FF8500; background: url('icons/deny.gif') no-repeat scroll 0 0 transparent; padding: 0 0 3px 22px; }
a.unapprove:hover { text-decoration:none; }
a.delete { color: #CC0000; background: url('icons/trash.png') no-repeat scroll 17px 0 transparent; padding: 0 0 4px 37px; }
a.delete:hover { text-decoration:none; }
table, table td { border: medium none; border-collapse: collapse; padding: 0; text-align: left; }
table.list td { border: 1px solid #CDCDCD; padding: 10px 10px 10px 10px; background-color:white; }
table.list tr.approved td { background-color: #FFFFFF; }
table.list tr.unapproved td { background-color: #FFFFE0; }
HTML Table Code
<table class="list">
<tr class="unapproved" id="c1">
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td><a href="#" class="approve">Approve</a> <a href="#" class="delete">Delete</a></td>
</tr>
<tr class="unapproved" id="c2">
<td>Aenean nec ligula turpis. Pellentesque in augue eu tellus pulvinar tristique.</td>
<td><a href="#" class="approve">Approve</a> <a href="#" class="delete">Delete</a></td>
</tr>
<tr class="unapproved" id="c3">
<td>Nulla pretium leo ut quam facilisis rhoncus. Pellentesque tincidunt euismod molestie.</td>
<td><a href="#" class="approve">Approve</a> <a href="#" class="delete">Delete</a></td>
</tr>
</table>
Each link has its own class. When it is clicked, JavaScript will trigger certain actions for that element and its parent elements.
For example, if you click the “Delete” link from a row, the fading effect will apply for all TDs (table cells) that belong to the TR (table row) where the link is located.
The JavaScript code for this action looks like this:
// Delete Comment
$('a.delete').click(function(e) {
e.preventDefault();
var a_link = $(this);
var tr_element = a_link.parents('tr');
var td_elements = tr_element.children('td');
var comment_id = tr_element.attr('id').substr(1);
$.ajax({
type: 'post',
url: 'actions/update-comment-status.php',
data: 'comment_id=' + comment_id +'&action=delete',
beforeSend: function() {
td_elements.animate(
{ backgroundColor:'#FF7373' }, 'fast'
).fadeOut('fast', function() {
td_elements.slideUp('fast');
});
},
success: function(response) {
// Action after the comment was deleted
}
});
});
When any link that has the class “delete” is clicked, it will have its default event prevented, meaning that it will not take you to any URL (in my example is just ‘#’ but it takes you to the top of the page so we don’t want that) that is inside the HREF attribute. Only the JavaScript code will be used, which is what we actually want. Click here for more information about the usage of preventDefault() method.
Next, the code gets the “Comment ID” which we need to pass to the PHP script that will perform the “delete” action. Since we are not allowed to put only numbers in the ID attribute, the value will be “c[comment_id_here]”. We’ll go up to the parent TR element of the clicked link and will extract the “Comment ID” from the ID attribute.
var a_link = $(this);
var tr_element = a_link.parents('tr');
var td_elements = tr_element.children('td');
var comment_id = tr_element.attr('id').substr(1);
Note that the ID should be unique for each element in a page. Make sure you do not have the same values in multiple rows when you are working with real data. You will likely have these table rows generated from a database through control structures such as for, while, do-while and foreach.
jQuery.ajax() performs an asynchronous HTTP (Ajax) request. In this example to the PHP file that either approves, unapproves or deletes the comment. Before the request is made, the color animation effect is shown and the row is faded out from the list:
beforeSend: function() {
td_elements.animate(
{ backgroundColor:'#FF7373' }, 'fast'
).fadeOut('fast', function() {
td_elements.slideUp('fast');
});
},
If you wish to perform additional actions in the page after the AJAX request is completed, you can do this within the following function:
success: function(response) {
// Action after the comment was deleted
}
The following JS code is used when “Approve” is clicked:
// Approve Comment
$('table.list').on('click', 'a.approve', function(e) {
e.preventDefault();
var a_link = $(this);
var tr_element = a_link.parents('tr');
var td_elements = tr_element.children('td');
var comment_id = tr_element.attr('id').substr(1);
$.ajax({
type: 'post',
url: 'actions/update-comment-status.php',
data: 'comment_id='+ comment_id +'&action=approve',
beforeSend: function() {
td_elements.animate(
{ backgroundColor:'#BFF6AB' }, 'fast'
).animate(
{ backgroundColor:'#ffffff' }, 'fast'
);
},
success: function(response) {
// Change row class from "unapproved" to "approved"
tr_element.removeClass('unapproved').addClass('approved');
// Update href title to "Unapprove"
a_link.html('Unapprove').removeClass('approve').addClass('unapprove');
}
});
return false;
});
If a link with the class “approve” – located inside a TABLE element that has the class “list” – is clicked, then the comment status will be updated (from Unapproved to Approved) by update-comment-status.php and the link’s title, as well as its class attribute will be changed as well. To accomplish this, I’ve used .on() which attaches an event handler function for one or more events to the selected elements.
For example, I’ve created a link element using JavaScript. This element was not initially in the DOM. To trigger an action when you click that element I’ve used .on(). Note that this method is available as of jQuery 1.7. When working with older versions of jQuery, then you can use the .delegate() method.
Final Result:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>UI State Change Effect</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Gabriel Comarita" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.effects.core.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) { // When DOM is ready
// Approve Comment
$('table.list').on('click', 'a.approve', function(e) {
e.preventDefault();
var a_link = $(this);
var tr_element = a_link.parents('tr');
var td_elements = tr_element.children('td');
var comment_id = tr_element.attr('id').substr(1);
$.ajax({
type: 'post',
url: 'actions/update-comment-status.php',
data: 'comment_id=' comment_id '&action=approve',
beforeSend: function() {
td_elements.animate(
{ backgroundColor:'#BFF6AB' }, 'fast'
).animate(
{ backgroundColor:'#ffffff' }, 'fast'
);
},
success: function(response) {
// Change row class from "unapproved" to "approved"
tr_element.removeClass('unapproved').addClass('approved');
// Update href title to "Unapprove"
a_link.html('Unapprove').removeClass('approve').addClass('unapprove');
}
});
return false;
});
// Unapprove Comment
$('table.list').on('click', 'a.unapprove', function(e) {
e.preventDefault();
var a_link = $(this);
var tr_element = a_link.parents('tr');
var td_elements = tr_element.children('td');
var comment_id = tr_element.attr('id').substr(1);
$.ajax({
type: 'post',
url: 'actions/update-comment-status.php',
data: 'comment_id=' comment_id '&action=unapprove',
beforeSend: function() {
td_elements.animate(
{ backgroundColor:'#FF9A40' }, 'fast'
).animate(
{ backgroundColor:'#FFFFE0' }, 'fast'
);
},
success: function(response) {
// Change row class from "approved" to "unapproved"
tr_element.removeClass('approved').addClass('unapproved');
// Update href title to "Unapprove"
a_link.html('Approve').removeClass('unapprove').addClass('approve');
}
});
return false;
});
// Delete Comment
$('a.delete').click(function(e) {
e.preventDefault();
var a_link = $(this);
var tr_element = a_link.parents('tr');
var td_elements = tr_element.children('td');
var comment_id = tr_element.attr('id').substr(1);
$.ajax({
type: 'post',
url: 'actions/update-comment-status.php',
data: 'comment_id=' comment_id '&action=delete',
beforeSend: function() {
td_elements.animate(
{ backgroundColor:'#FF7373' }, 'fast'
).fadeOut('fast', function() {
td_elements.slideUp('fast');
});
},
success: function(response) {
// Action after the comment was deleted
}
});
});
});
</script>
</head>
<body>
<h2>Comments List</h2>
<table class="list">
<tr class="unapproved" id="c1">
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
<td><a href="#" class="approve">Approve</a> <a href="#" class="delete">Delete</a></td>
</tr>
<tr class="unapproved" id="c2">
<td>Aenean nec ligula turpis. Pellentesque in augue eu tellus pulvinar tristique.</td>
<td><a href="#" class="approve">Approve</a> <a href="#" class="delete">Delete</a></td>
</tr>
<tr class="unapproved" id="c3">
<td>Nulla pretium leo ut quam facilisis rhoncus. Pellentesque tincidunt euismod molestie.</td>
<td><a href="#" class="approve">Approve</a> <a href="#" class="delete">Delete</a></td>
</tr>
</table>
</body>
</html>