Load comments per post on click with AJAX

Question

I'm working on a theme that uses a slider to display blog posts. Beneath the slider is a pagination that displays like a timeline, with a date instead of a page number, calling the corresponding blog post. I want to display the comments for each post, but outside the slider. So, I have this code in my header, to get the comments with ajax:

:: EDITED (now using wp-admin/admin-ajax.php to handle request, as advised below) ::

$(".timeline-entry a").live('click', function(event) {
  event.preventDefault();
  $.ajax({
     url: '<?php echo admin_url('admin-ajax.php'); ?>',
     type: 'POST',
     action: 'do_ajax',
     data: {
        'post_id' : '72' //using a post id that I *know* has comments, for testing!
     },
     dataType: "json",
     success: function(myResult) {
        alert(myResult);
     },
     error: function(error) {
        alert(error);
     }
  });
});

In my functions.php:

add_action('wp_ajax_nopriv_do_ajax', 'retrieve_comments');
add_action('wp_ajax_do_ajax', 'retrieve_comments');

function retrieve_comments(){      
    $myPost = $_REQUEST['post_id'];
    $output = get_comments('post_id=' + $myPost);
    $output = json_encode($output);          
    if(is_array($output)){         
        print_r($output);             
    }          
    else{         
        echo $output;          
    }          
    die;
}; 

I get 0 in the alert box... so that means the ajax is happening, but something is wrong with my php function, right?

Thanks for your help.

Answer 1

Aha, I think my syntax was wrong.

I changed:

 action: 'do_ajax',
 data: {
    'post_id' : '72' //using a post id that I *know* has comments, for testing!
 },

to:

data: {
    'action' : 'do_ajax',
    'post_id' : '72'
},

and I'm getting the correct response from the console.log which shows:

[{"comment_ID":"1","comment_post_ID":"1","comment_author":"Mr WordPress","comment_author_email":"","comment_author_url":"http:\/\/wordpress.org\/","comment_author_IP":"","comment_date":"2012-08-28 19:55:20","comment_date_gmt":"2012-08-28 19:55:20","comment_content":"Hi, this is a comment.<br \/>To delete a comment, just log in and view the post&#039;s comments. There you will have the option to edit or delete them.","comment_karma":"0","comment_approved":"1","comment_agent":"","comment_type":"","comment_parent":"0","user_id":"0"},{"comment_ID":"2","comment_post_ID":"72","comment_author":"Mr WordPress","comment_author_email":"","comment_author_url":"http:\/\/wordpress.org\/","comment_author_IP":"","comment_date":"2010-07-11 12:10:08","comment_date_gmt":"2010-07-11 12:10:08","comment_content":"Hi, this is a comment.<br \/>To delete a comment, just log in and view the post&#039;s comments. There you will have the option to edit or delete them.","comment_karma":"0","comment_approved":"1","comment_agent":"","comment_type":"","comment_parent":"0","user_id":"0"}

So now I'm figuring out how best to handle the array :)

Answer 2

Your PHP file isn't loaded in the context of the WordPress environment, so you don't have access to any WordPress functions. See AJAX in Plugins in Codex for the proper way to handle AJAX calls in WordPress, particularly Ajax on the Viewer-Facing Side. Despite the title of the page, this is also how AJAX should be handled in themes.

EDIT - This is a good tutorial (linked on the bottom of the above Codex page) for making sense of the WordPress AJAX facilities.