CODEWITHSUNDEEP
jquerywordpress
Freddie
Freddie

Reputation: 97

wordpress jQuery pagination with div tag id

I face some problem with display compability when run this code..

<div id="content">
<?php

    //The Query

    $new_query = new WP_Query();
    $new_query->query('showposts=1'.'&paged='.$paged);

    //The Loop

    while ($new_query->have_posts()) : $new_query->the_post();
?>

<a class="tajuk" href="<?php the_permalink() ?>" title="<?php echo get_the_title(); ?>">
    <?php echo get_the_title(); ?>
</a>

<?php
    endwhile;
    wp_reset_postdata();
?>
</div>

<div id="pagination">
  <?php next_posts_link('&laquo; Older Entries', $new_query->max_num_pages) ?>
  <?php previous_posts_link('Newer Entries &raquo;') ?>
</div>

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

everything works fine now.. but I need to change div id="content" to another id for some reason.. after I made change that div tag to for an example div id="testcode" also same goes to $('#testcode') inside javascript tag ajax pagination not working after all.. can someone help me?

Upvotes: 1

Views: 1218

Answers (1)

Mike
Mike

Reputation: 8877

You need to update the JavaScript too, which you say you did, but did you do it in all three places?

Also, your event listener is looking for #pagination a inside #content, which in the case of your markup is not the case. For ease of this example I have set the container to document.

Your JavaScript should look like the following:

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

If this doesn't work you need to do some common debugging techniques such as:

  • Check your JavaScript console for errors
  • Be sure you don't have the same ID twice
  • Check the AJAX call is happening or not, this will help identify where the problem is, you do this in the network tab of developer tools in Chrome or Firefox
  • Add console.log calls in key places of your code to see what is triggered and what is not. This will help identify the problem area

Upvotes: 1

Related Questions