AJAX: Send and retrieve a value with jquery post() and PHP, WordPress

Answer 1

WordPress has built in AJAX capabilities. Send your ajax request to /wp-admin/admin-ajax.php using POST with the argument 'action':

jQuery(document).ready(function(){
        jQuery.ajax({
          type:'POST',
          data:{
            action:'my_unique_action',
            id:'testValue'
          },
          url: "http://mysite/wp-admin/admin-ajax.php",
          success: function(value) {
            jQuery(this).html(value);
          }
        });
});

Then hook it in the plugin like this if you only want it to work for logged in users:

add_action('wp_ajax_my_unique_action','doMyCustomAjax');

or hook it like this to work only for non-logged in users:

add_action('wp_ajax_nopriv_my_unique_action','doMyCustomAjax');

Use both if you want it to work for everybody.

Here's the doAjax function, for example:

function doMyCustomAjax(){
  $id = ( isset( $_POST['id'] ) ) ? $_POST['id'] : '';
  if( empty( $id ) )
    return;
  echo $id;
}

Put that in functions.php too. That will return the id you send in AJAX.

admin-ajax.php uses some action names already, so make sure you look through the file and don't use the same action names, or else you'll accidentally try to do things like delete comments, etc.

EDIT

Put the add_action lines in the functions.php file. The admin-ajax.php file will run some functions and then runs the hook that your 'action' value makes, then kills the script. I've modified the code above to reflect this information.

Answer 2

Ok... sorry to use the Answer to add a comment, but it will be much easier to elaborate with the code display here.

So, I have the following in my functions.php:

add_action('wp_ajax_my_unique_action','doMyCustomAjax');

function doMyCustomAjax(){
  $id = ( isset( $_POST['id'] ) ) ? $_POST['id'] : '';
  if( empty( $id ) )
    return;
  echo $id;
}

the following script in footer.php to be executed on my category archive:

<script type="text/javascript">
    $(document).ready(function() {
        //Filter Categories
        $.ajaxSetup({cache:true});
        $('#byAuthorCtrl ul li').click( function() {
            jQuery.ajax({
              type:'POST',
              data:{id:'my_unique_action'},
              url: "http://www.theknotcollective.com/wp-admin/admin-ajax.php",
              success: function(value) {
                jQuery(this).html(value);
              }
            });
        });
    });

</script>

and the following at the top of my category.php:

<p id="sortFilter"><?php doMyCustomAjax(); ?></p>

Again my goal is to post that "id" variable once the link is clicked, then retrieve it once the page has been reloaded, in order to end up with a different loop on page refresh.

I'm new to ajax and this type of PHP function so I don't quite understand what's going on here, and obviously I'm missing something / doing something wrong. If you could elaborate a little I'd really appreciate it!

Thx!