load more posts by category

Question

Well as you can see here im doing a load by category in every tab i have and show a total posts of 10 by each tab i want to setup once the 10 posts are done.

i want to add a load more button to the bottom of the 10 posts i have done that but the viewer has to see the rest of the posts else where for a specific category so i want to show more posts by that category by staying in that same page loading more posts in that tab.

this is what i do to display each tab by category & by total posts

 <?php
 $rightbox = get_posts('&cat=8&showposts=10');
 foreach($rightbox as $post) :
    setup_postdata($post); ?>

i hope someone can help me out Here's the entire code from a tab http://pastie.org/7731669 thanks

Answer 1

You will need to load the next 10 posts with an AJAX request and keep the current offset stored in the DOM.

Attach an ID to the <span> element which is your button, in my example I have used #load_posts.

Then using jQuery, you can easily setup the click event for the button to fire the AJAX request.

So the button:

   <span class="ar-bottom-link-tabs" id="load_posts">
        <span>
            <a href="#">Load more &raquo;</a>
        </span>
   </span>

And then add the jQuery underneath outside of the loop:

<script type="text/javascript">

    // We have already loaded 10 posts, so set it up as 10 by default
    var currentOffset = 10;
    var categoryId = 8;

    $('#load_posts').bind('click', function(e){

        // Stop the link reloading the page 
        e.preventDefault();

        // Asign variables to an array
        var data = {
            offset: currentOffset,
            catid: categoryId
        };

        // AJAX $_POST request to PHP file
        $.post('path_to_php_file.php', data, function(response) {

            // do something with the response... loop through and append to the tab content
            // so you could return the output as JSON

            // Add 10 to the offset
            currentOffset+10;

        });         

    });

</script>

Then in the PHP file used for the AJAX request just repeat your get_posts() call:

$args = array(
    'cat' => $_REQUEST['catid'],
    'offset' => $_REQUEST['offset'],
    'showposts' => 10
);

$posts = get_posts($args);

I will let you fill in the gaps but this should send you on your way in the right direction.