How to use ajax in WordpRess Theme or Plugin

WP-+-AJAX
Well, sometimes we need to implement ajax functionality to our WordPress theme or plugins.Find below a tutorial written for this purpose

Step:1
For example to use ajax, I have create a page in theme that show unapproved comment and allow user to approve it .Find below it’s code

<table class="table" width="100%" border="0">
<tbody>
<tr class="tr_heading">
<td width="39%" height="49">Post</td>
<td width="32%">Comment</td>
<td width="29%">Comment By</td>
</tr>
<!--?php 

     $comments_unapproved = get_comments(array('status'='hold'));
	 //in above line change '=' to array symbol greater than equals to ,
       //just had put above due to some displaying error in webpage

    foreach ( $comments_unapproved as $comments){
      if(current_user_can('edit_published_posts')){
      ?-->
<tr>
<td></td>
<td style="border-left: 1px solid #babbbb;"><!--?php echo $comments--->comment_content; ?&gt;
<div style="clear: both;"></div>
<a class="button1" href="javascript:void(0)">Delete</a> <a class="button1" onclick="return comment(&lt;?php echo $comments-&gt;comment_ID;  ?&gt;);" href="javascript:void(0)">Approve</a></td>
<td style="border-left: 1px solid #babbbb;">&gt;<!--?php echo $comments--->comment_author; ?&gt;</td>
</tr>
<!--?php 
   }  
    }
 	 ?--></tbody>
</table>

Step 2:
Create function as per your requirements inside functions.php of theme folder or in your plugins file .
example :

function comment_approve(){
 	$commentarr = array();
	$commentarr['comment_ID'] = $_POST['comment_id'];
	$commentarr['comment_approved'] = 1;
	wp_update_comment( $commentarr );
	 echo 1;
	wp_die();
}

Step: 3
After put below hooks just below above function

add_action('wp_ajax_comment_approve', 'comment_approve');
add_action('wp_ajax_nopriv_comment_approve', 'comment_approve');

Step:3
call Ajax request in your template file

example:

<script type="text/javascript">// <![CDATA[
		 function comment(comment_id){
		 	 var data="action=comment_approve&#038;"+"comment_id="+comment_id;
                         var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';

			 jQuery.ajax({
 				url:ajaxurl,
				type:"POST",
				data:data,
				success:function(output){
						if(output==1){
							alert('comment deleted');
						}else{
							alert('Some error');
						}

						}
			 });

		}
// ]]></script>

Note:
1) action key in our case ‘comment_approve’ should match with half of the hook name i.e wp_ajax_comment_approve
2) hook second parameter i.e ‘comment_approve’ name can be anything ,not necessary to match with the action key
3) There should be created a function with the same name of hook second parameter i.e ‘comment_approve’

That’s it .If all steps followed correctly, you should see ajax work or try to fix with browser ‘console’ panel
This tutorial created for displaying comment list in front end theme page and providing option to approve comment .
If any query ,you can comment below.

Online Web Development Training,Video Tutorials