Load more posts (Ajax) in tabbed sidebar on single.php

Question

I'm trying to use this approach https://wordpress.stackexchange.com/a/56349/18144 to create a 'load more' button in the sidebar on single.php. I would like to able to load more posts in a sidebar tab after clicking the load more button.

I'm missing something, since it doesn't work. But there are no errors in the console, so I don't really know where to start.

The sidebar on single.php has the following (simplified)structure:

<aside id="sidemenu-container">

<div id="side-top">....</div>

<div id="side-tabs">
<div class="tab_container">
<div id="new" class="tab_content">
<li>...</li>
</div>
<div id="must-see" class="tab_content">
<li>...</li>
</div>

</div>


<div id="side-bottom">
<li>Up | My Fav's |<a id="#blog-more" href="#" class="button radius">Load More</a></li>
</div>


</div>
</aside>

What I've got so far:

In functions.php I've added:

add_action( 'wp_enqueue_scripts', 'wpa56343_scripts', 100 );

function wpa56343_scripts() {
wp_enqueue_script(
    'wpa56343_script',
    get_template_directory_uri() . '/js/ajaxscripts.js?ver=1.0',
    array( 'jquery' ),
    null,
    false
);
wp_localize_script(
    'wpa56343_script',
    'WPaAjax',
    array(
        'ajaxurl' => admin_url( 'admin-ajax.php' )
    )
);
}

add_action('wp_ajax_wpa56343_more', 'wpa56343_more');
add_action('wp_ajax_nopriv_wpa56343_more', 'wpa56343_more');

function wpa56343_more(){
global $wp_query;

$offset = $_POST['postoffset'];
$args = array(
    'offset' => $offset,
    'posts_per_page' => 10
);
$wp_query = new WP_Query( $args );

get_template_part( 'includes/ajaxsidebar');
exit;
}

ajaxscripts.js contains:

jQuery(document).ready(function($){

$('#blog-more').click(function(e){ // <- added
    e.preventDefault(); // <- added to prevent normal form submission
    var postoffset = 5;
    $.get(
        WPaAjax.ajaxurl,
        {
            action : 'wpa56343_more',
            postoffset : postoffset
        },
        function( response ) {
            $('#new').append( response );
        }
    );
});

});

template part ajaxsidebar contains:

<?php if (have_posts()) : ?>
           <?php while (have_posts()) : the_post(); ?>    
<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_post_thumbnail() ?><?php the_title(); ?></a></li>
           <?php endwhile; ?>
 <?php endif; ?>

Answer 1

For anyone that comes across this as I did via the Googlez, I was trying to load new articles onto the bottom of a single.php page (infinite scroll).

I discovered that by adding an increment to the "offset" value, and then using $.post() instead of $.get(), I was able to do this.

Following the code outlined above (and the subsequent change), I pulled it off like so, with basic post implementation (just the title) that I will fix later:

in functions.php:

add_action( 'wp_enqueue_scripts', 'wpa56343_scripts', 100 );

function wpa56343_scripts() {
    wp_enqueue_script(
        'wpa56343_script',
        get_template_directory_uri() . '/javascripts/ajaxscripts.js?ver=1.0',
        array( 'jquery' ),
        null,
        false
    );
    wp_localize_script(
        'wpa56343_script',
        'WPaAjax',
        array(
            'ajaxurl' => admin_url( 'admin-ajax.php' )
        )
    );
}

add_action('wp_ajax_wpa56343_more', 'wpa56343_more');
add_action('wp_ajax_nopriv_wpa56343_more', 'wpa56343_more');

function wpa56343_more(){
    global $wp_query;

    $offset = $_POST['postoffset'];

    $args = array(
        'offset' => $offset,
        'posts_per_page' => 1
    );
    $wp_query = new WP_Query( $args );

    get_template_part( 'recent-posts');
    exit;
    }

in ajaxscripts.js

jQuery(document).ready(function($){
var postoffset = 0;
$('#blog-more').click(function(e){ // <- added
    e.preventDefault(); // <- added to prevent normal form submission
    postoffset = postoffset + 1;
    $.post(
        WPaAjax.ajaxurl,
        {
            action : 'wpa56343_more',
            postoffset : postoffset,
        },
        function( response ) {
            //alert(response);
            $('#new').append( response );
        }
    );
});

});

in recentposts.php

<?php if (have_posts()) : ?>
           <?php while (have_posts()) : the_post(); ?>    
<a href="<?php the_permalink() ?>" rel="bookmark"><?php //the_post_thumbnail() ?><?php the_title(); ?></a><br>
           <?php endwhile; ?>
 <?php endif; ?>

I will change the "onclick" to a "when you reach the top of the page, but with the hard part over, that is child's play.

Thanks to the original poster for his work and the commenters for theirs.