user1391152 user1391152 - 6 months ago 45
jQuery Question

Wordpress ajax pagination for comments

I am calling in my Wordpress comments from the database and displaying them using a custom query, then using Wordpress'

paginate_links()
function to paginate my comments. My code:

<div class="commentsWrap">
<div id="comments" class="commentBoxesWrap">
<?php
global $wpdb;
$querystr = " SELECT comment_content, commentmeta1.meta_value
AS comment_name, commentmeta2.meta_value
AS comment_country
FROM $wpdb->comments, $wpdb->commentmeta
AS commentmeta1, $wpdb->commentmeta
AS commentmeta2
WHERE $wpdb->comments.comment_ID = commentmeta1.comment_id
AND $wpdb->comments.comment_ID = commentmeta2.comment_id
AND commentmeta1.meta_key = 'comment_name'
AND commentmeta2.meta_key = 'comment_country'
AND $wpdb->comments.comment_approved = 1 ";

$total_query = "SELECT COUNT(1) FROM (${querystr}) AS combined_table";
$total = $wpdb->get_var( $total_query );
$items_per_page = 4;
$page = isset( $_GET['paged'] ) ? abs( (int) $_GET['paged'] ) : 1;
$offset = ( $page * $items_per_page ) - $items_per_page;
$comment_info = $wpdb->get_results($querystr . "ORDER BY $wpdb->comments.comment_date DESC LIMIT ${offset}, $items_per_page");

echo '<ul class="commentsList">';
// display the results
foreach($comment_info as $info) {
echo '<li class="commentBox"><p>"' . $info->comment_content . '"</p><h6>' . $info->comment_name . ', ' . $info->comment_country . '</h6></li>';
}
echo '</ul>';
?>

</div> <!-- //commentBoxesWrap -->
<?php
echo '<div class="commentPagination">';
echo paginate_links( array(
'base' => add_query_arg( 'paged', '%#%' ),
'format' => '',
'prev_text' => __('&laquo;'),
'next_text' => __('&raquo;'),
'total' => ceil($total / $items_per_page),
'current' => $page
));
echo '</div>';
?>
</div> <!-- //commentsWrap -->


This works fine and outputs a numbered pagination, however, I need to ajax the comments when I click the pagination. With a bit of research I managed to come up with this js code:

$('.commentsWrap').on('click', '.commentPagination a', function(event) {
event.preventDefault();
var link = $(this).attr('href');
$('.commentsWrap').load(link + '.commentsWrap');
});


What this does though is load the entire page by ajax rather than the comments section! Can anybody help me please??

Thanks.

Answer

Try this for the pagination of comments. I have used jquery for this. You will need to change the url of ajax page url and loader image source. Try to add this below you code. This code will only work if your pagination is right and working.

<div class="loadmorediv">

        <button id="loadmorebutton" style="padding:15px 25px;">More</button>

        <button id="no_morebutton" style="padding:15px 25px;">No more</button>

        </div> <!-- //commentsWrap -->


        <div class="row" style="text-align:center; ">

        <a id="inifiniteLoader"><img src="imagesoruce" /></a>

            <div style="clear:both"></div>

        </div> 

 <script type="text/javascript">

        var count = 2;

        var total = <?php ceil($total / $items_per_page)  ?>;


        jQuery(function($) {

            $('#loadmorebutton').click(function() {


                     if (count > total){

                 $('#loadmorebutton').hide();

                    $('#no_morebutton').show();

                return false;

                }else{

                        $('#loadmorebutton').hide();

                     $('a#inifiniteLoader').show();

                    loadArticle(count);

                 }

                 count++;



            })

        });

        function loadArticle(pageNumber){    

               jQuery.ajax({

                     url: "Yourpageurl"+pageNumber+"/",

                    type:'POST',                      

                    success: function(html){
                   result=    jQuery(html);

                        jQuery('a#inifiniteLoader').hide('1000');

                        jQuery('#loadmorebutton').show('1000');

                     jQuery("ul.commentsList").append(result.find("ul.commentsList").html());   // This will be the div where our content will 
                    }
                });

            return false;
                  }

    </script>
Comments