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('« Older Entries', $new_query->max_num_pages) ?>
<?php previous_posts_link('Newer Entries »') ?>
</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?
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 todocument
.Your JavaScript should look like the following:
If this doesn’t work you need to do some common debugging techniques such as:
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