Wordpress - how can I fetch more posts via AJAX?

Question

To begin with, I think this is a longshot but hopefully there is someone out there that can help.

To explain the current situation, at the moment I have a custom plugin that grabs various bits of information about a user and their 4 most recent posts.

I am also using the WPBook plugin (so this is on facebook and just just a typical wordpress site)

Ok, so here is my code that is grabbing the 4 most recent posts for a user:

// The Query
query_posts('posts_per_page=4&author='.$blogger_id);

// set $more to 0 in order to only get the first part of the post
global $more;
$more = 0;

// the Loop
while (have_posts()) : the_post();
?>
    <div class="oe-grid-box">
        <a href="<?php the_permalink() ?>" <?php the_title()?></a>
        <div class="oe-grid-box-content">
            <?php echo the_content( '...' ); ?>
        </div>
        <div class="oe-grid-pic">
            <a href="<?php the_permalink() ?>">
                <span class="<?php echo strtolower($category); ?>"></span>
            </a>
            <?php echo $image; ?>
        </div>
    </div>
<?php
endwhile;

// Reset Query
wp_reset_query();
?>


<div id="load-more">Load More</div>

I tried following this tutorial but instead of a separate plugin, placing the code in my existing plugin but now my page won't load:

http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/

Ideally, want I want to is when the load more button is clicked, fetch 4 more posts and show them.

If anybody could help I'd really appreciate it.

UPDATE

Ok,

so far I've added in my jQuery to call the php file which should hopefully return posts but it doesn't work.

I am thinking that it's because it doesn't know what the WordPress functions are?

If I put a simple echo in my load more script, the jQuery success function shows an alert to say it worked, but if I start doing WordPress stuff I get an internal server error, this is the code in the load-more.php file:

// load wordpress into template
$path = $_SERVER['DOCUMENT_ROOT'];
define('WP_USE_THEMES', false);
require($path .'/wp-load.php');


$blogger_id = $_GET['id'];
$firstname  = $_GET['firstname'];
$surname    = $_GET['surname'];
$posts      = $_GET['posts'] + 4;
$category   = $_GET['category'];
$image      = $_GET['image'];

// The Query
query_posts('paged='.get_query_var('paged').'&posts_per_page=' . $posts . '&author='.$blogger_id);

// set $more to 0 in order to only get the first part of the post
global $more;
$more = 0;

// then the same loop as in my page that is making the ajax call.

Answer 1

After a lot of effort, I found the answer, here is a solution for those stuck in the same position.

This goes in your plugin page where you are getting posts for a user etc.

<script type="text/javascript">
    $(document).ready(function() {

        posts = 8;
        author_posts = parseInt(<?php echo $author_posts; ?>);

        $("#link_selector").click(function() {

            // alert('posts - ' + posts + 'author posts - ' + author_posts);


            if ((posts - author_posts) > 3) {
                $("#link_selector").text('No more posts!');
            }
            else {

                var category        = '<?php echo strtolower($category); ?>';
                var id              = '<?php echo $blogger_id; ?>';
                var firstname       = '<?php echo $firstname; ?>';
                var surname         = '<?php echo $surname; ?>';


                // alert(posts + category + id + firstname + surname);

                $.ajax({
                    type: "GET",
                    url: "/wordpress/wp-admin/admin-ajax.php",
                    dataType: 'html',
                    data: ({ action: 'loadMore', id: id, firstname: firstname, surname: surname, posts: posts, category: category}),
                    success: function(data){
                        $('#ajax_results_container').hide().fadeIn('slow').html(data);
                        posts = posts + 4;

                        if ((posts - author_posts) > 3) {
                            $("#link_selector").text('No more posts!');
                        }

                    }
                });
            }

        });
    });

    </script>       

Then in your theme's functions.php, put your function to do your ajax request:

function loadMore() {

    $blogger_id = $_GET['id'];
    // get your $_GET variables sorted out

    // setup your query to get what you want
    query_posts('posts_per_page=' . $posts . '&author='.$blogger_id);

    // initialsise your output
    $output = '';

    // the Loop
    while (have_posts()) : the_post();

        // define the structure of your posts markup

    endwhile;

    // Reset Query
    wp_reset_query();

    die($output);

}

Then, just after the closing of your function, put in the action hooks

add_action('wp_ajax_loadMore', 'loadMore');
add_action('wp_ajax_nopriv_loadMore', 'loadMore'); // not really needed

That's it!