Post will not load via ajax

Question

I have inherited a WP 3.2.1 site which uses prettyPhoto to load content via ajax. This was working before I enabled permalinks on the site. The Custom Post Type UI plugin is installed. I can browse to my custom post type at mysite.com/story/name-of-story but loading via ajax results in a 404.

The links which trigger the $.get code in prettyPhoto look like this:

<a href="<?php echo get_permalink(); ?>&ajax=true&count=<?php echo $count ?>" rel="story[ajax]"><?php echo wp_get_attachment_image($attachment->ID, array(75, 75));?></a>

If I change the permalink settings back to 'default'. the post content is loaded into the popup. The hrefs being called via XHR while it is working look like this:

http://mysite.com/?story=name-of-story&ajax=true&count=37

I've tried removing all query parameters from the permalink URLS and this did not resolve the problem. Can anyone shed any light on what might be going on here?

Answer 1

All ajax requests should be routed through the handy /wp-admin/admin-ajax.php file.

It works with the great WP hooks system. So you send an "action" with your request and use that as part of the action into which you hook your function.

So, let's say your ajax call looks like this (with jQuery)

jQuery('a.ajax').click(function(e){
    data = {
        'action': 'wpse31321_action',
        'story': 1 // IDs are easier to deal with...
    }
    jQuery.get(
        'http://www.yoursite.com/wp-admin/admin-ajax.php',
        data,
        function(resp){
            // do stuff with the response.
        }
    );

    e.preventDefault();
});

Then, in your functions.php file or a plugin, you need to hook into wp_ajax_wpse31321_action and wp_ajax_nopriv_wpse31321_action. This is the part that does the work: you have access to the complete WP api inside your hooked function. Get posts, whatever.

wp_ajax_[some_action] is for logged in users. wp_ajax_nopriv_[some_action] is for everyone else. [some_action] is, of course, the action you send along with your request. wpse31321_action in our example.

<?php
add_action( 'wp_ajax_wpse31321_action', 'wpse31321_ajax' );
add_action( 'wp_ajax_nopriv_wpse31321_action', 'wpse31321_ajax' );
function wpse31321_ajax()
{
    // you have access to $_REQUEST, $_POST and $_GET here...
    if( isset ( $_REQUEST['story'] ) )
    {
        $story = get_post( (int) $_REQUEST['story'] );
        if( ! $story ) die( '-1' );
        echo $story->post_content;
        die(); // Always kill the script after echoing out what you need.   
    }
    else
    {
        die( '-1' );
    }
}

You can do whatever you want to manipulate the data before echoing it out. The above is a really simplistic answer, without much error checking or security built in. But it should get you started.

Further reading:

http://wpajax.com/

http://codex.wordpress.org/AJAX_in_Plugins

http://codex.wordpress.org/AJAX