Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have integrated an AJAX Pagination in my site sidebar, where I'm showing custom post type.

Here is my code:

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$new_query = new WP_Query();
$new_query->query('post_type=listing&showposts=5'.'&paged='.$paged);
?>

<ul id="content-sidet">
<?php if ($new_query->have_posts()) : while ($new_query->have_posts()) : $new_query->the_post(); ?>

<?php  if(has_post_thumbnail()){
$c_image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'scroller-thumb');
        }

        ?>
        <?php
        $kstoreStreet=get_post_meta($post->ID,'street',true);
        $kstoreCity=get_post_meta($post->ID,'city',true);
        // $map_bubble=get_the_title($post->ID);
        $desc=get_post_meta($post->ID,'description',true);
        ?>
        <li class="home-list">
            <div style="padding:10px 0px 10px 10px;">
                <div style="float:left; width:60px; height:60px; overflow:hidden; margin-right:5px;">
                    <img src="<?php echo $c_image[0];?>" alt="<?php the_title();?>">
                </div>
                <div style="float:right; color:#fff;width:200px;padding-top:5px;">
                    <a href="<?php the_permalink();?>" title="<?php the_title();?>"/><strong><?php the_title();?></strong></a><br/>
                    <b>Address:</b> <?php echo $kstoreStreet;?> | <?php echo $kstoreCity;?> <br/>
                    <?php if( ( $et_rating = et_get_rating() ) && 0 != $et_rating ) : ?>
                    <span class="et-rating"><span style="<?php printf( 'width: %dpx;', esc_attr( $et_rating * 17 ) ); ?>"></span></span>
                    <?php endif; ?>


                </div>
                <div class="clear"></div>
            </div>
        </li>

            <?php endwhile; //endwhile 
                                 wp_reset_query(); ?>


    <div style="clear:both;"></div>
 <div class="outer-submit">
<?php next_posts_link('&laquo; Older Entries', $new_query->max_num_pages) ?><br/>
<?php previous_posts_link('Newer Entries &raquo;') ?>
</div>
<!-- #nav-below -->

</ul>

The query works perfectly and I can see 4 posts in the side bar with a navigation to Previous Posts. I want to make this Previous ad Next link an AJAX link so that the <ul> element shows 4 new posts without whole page refresh ( I'm writing above code in sidebar)

My javascript is as follows:

<script>
jQuery(function($) {
$('#content-sidet').on('click', '.outer-submit a', function(e){
    e.preventDefault();
    var link = $(this).attr('href');
    $('#content-sidet').fadeOut(500, function(){
        $(this).load(link + ' #content-sidet').fadeIn(500);
    });
});
});
</script>

When I click the Previous/Next Links I can see a fadeout , but the same old posts load. What I mean is posts on initial page.

Can someone guide me in pointing out, what am I doing wrong here?

share|improve this question
    
Can any one guide me? –  user3170139 Feb 3 at 8:07
1  
If you use chrome or firefox you can use the developer tools to see what values the ajax file is returning. –  gdaniel Feb 3 at 17:00
    
Got it working. There was a possible conflict with a jQuery Toggle script. Thanks! –  user3170139 Feb 4 at 6:13
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.