Hi there.

This time I'm back with WP AJAX. Simple to use and easy to code.

Actually using Ajax directly into your plugin or theme is a little immature way. Cause you'll have to keep track of your files to make it work, which sometime become difficult. That's where WP_Ajax make things comfortable.

I'll share sample codes with you and will try to explain how it works.

To follow this tutorial you need to have basic understanding of AJAX, WP Plugins, WP Hooks and some other things.

To initialize AJAX let's write a sample Ajax code.

jQuery('#ajax-button').on('click', function() {
    jQuery.post(
        ajaxurl,
         {
             action: 'our_ajax_action',
             myname: 'Babar'
          },
          function( response ) {
              alert(response);
          }
    );
});

We're binding our click action on a button with id ajax-button. "ajaxurl" is defined by WP which is actually <?php admin_url().'/wp-ajax.php'; ?>. And notice the action parameter. We'll use that later.

Now filter it into the footer.

function our_footer_js_for_ajax() {
?>
<script type="text/javascript">
jQuery('#ajax-button').on('click', function() {
    jQuery.post(
        ajaxurl,
         {
             action: 'our_ajax_action',
             myname: 'Babar'
          },
          function( response ) {
              alert(response);
          }
    );
});
</script>
<?php }
add_filter('wp_footer', 'our_footer_js_for_ajax');

If you want it onto admin area, filter it in admin footer.

add_filter('admin_footer', 'our_footer_js_for_ajax');

Now time for our AJAX handler.

function our_ajax_handler_callback() {
    echo $_POST['myname'];
    die();
}

Always remember to die() or exit at the very end of the handler function. Hoot it into Ajax action. Remember our Ajax action we wrote in our JS code? We'll use it here.

add_acton('wp_ajax_our_ajax_action', 'our_ajax_handler_callback');

So it's actually Concatenate of wp_ajax_ prefix and your action data in Ajax code.

If you want to activate Ajax for non-logged in users another hook needed.

add_action( 'wp_ajax_nopriv_our_ajax_action', 'our_ajax_handler_callback' );

Just prefeix with wp_ajax_noprov_ instead of wp_ajax_.

And that's it.




What's on your mind?


6 Comments

391f8994df0c3e6b199141ff9b45e7f1?s=100
arcmos.com commented about 18 hours ago

I got this website from my buddy who informed me regarding this site and now this time I am visiting this site and reading very informative articles at this place.

03a1a94b0c3240bbb9865b117ab6179c?s=100
Loreen commented 4 days ago

Nice replies in return of this difficulty with firm arguments and describing everything concerning that.

60a7112bf27831b5f5913804e11f42ad?s=100

You actually make it seem so easy with your presentation but I find this matter to be really something that I think I would never understand. It seems too complicated and very broad for me.

I am looking forward for your next post, I will try to get the hang of it!

Bbd959cf76fc94e3abc484f220f49962?s=100
madden mobile coins free no survey commented about 16 hours ago

You actually make it seem so easy together with your presentation however I find this matter to be really something which I believe I'd by no means understand. It seems too complex and extremely broad for me. I'm having a look ahead on your subsequent submit, I will attempt to get the hold of it!

6ff579eb4e6dfa8c9fa8c13afda9de65?s=100
cs go skins trade commented 4 days ago

Heya i'm for the primary time here. I found this board and I in finding It really helpful & it helped me out much. I'm hoping to provide one thing back and help others such as you helped me.

E6cc82f8919b8bb5162c3602a0f78de6?s=100
csgo skins free reddit commented about 16 hours ago

Quality posts is the key to attract the users to go to see the web site, that's what this web site is providing.