• Okay.

    So I coded this website from a friend’s design and one of the features is the “Latest News” section on the homepage, which has a small post feed.

    The only problem was the pagination, which would refresh the entire page and I so I added a bit of jQuery/AJAX so that it would just show a loading gif and load without refreshing. It was working perfectly until now.

    Now it’s refreshing again and the code is literally the exact same code.

    Here’s the site: http://www.samanthaschmid.com/

    Here’s the jQuery in the header:

    <script type="text/javascript" charset="utf-8">
    jQuery(document).ready(function(){
    jQuery('.navarrow a').live('click', function(e){
      e.preventDefault();
      var link = jQuery(this).attr('href');
      jQuery('#lnouter').html('<div style="width: 41px; margin: 0 auto; padding: 180px 0 0 0;"><img src="<?php bloginfo('template_url'); ?>/images/icons/loading.gif" /></div>');
      jQuery('#lnouter').load(link+' #lninner');
    
      });
    
      });
      </script>

    And here’s the php:

    <?php
    if ( get_query_var('paged') ) { $paged = get_query_var('paged'); }
    elseif ( get_query_var('page') ) { $paged = get_query_var('page'); }
    else { $paged = 1; }
    
    query_posts('post_type=post&post_status=publish&posts_per_page=1&category_name=homepage-news&paged=' . $paged);
    ?>
    		<?php if( have_posts() ): ?>
    		<?php while( have_posts() ): the_post(); ?>
    		<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' ); ?>
    		<?php $excerpt = get_the_excerpt(); ?>
    		<?php $previous_posts_image = '<img class="navarrow_icon" src="' . get_bloginfo('stylesheet_directory') . '/images/icons/blog-arrow-up.png" />'; ?>
    		<?php $next_posts_image = '<img class="navarrow_icon" src="' . get_bloginfo('stylesheet_directory') . '/images/icons/blog-arrow-down.png" />'; ?>
    
    		<div id="blogfeed">
    			<div id="blognail">
    				<div class="navarrow">
    					<?php previous_posts_link($previous_posts_image); ?>
    				</div>
    				<div style="clear:both"></div>
    				<div id="blogthumb" style="background: url(<?php echo $src[0]; ?> ) !important;"></div>
    				<div style="clear:both"></div>
    				<div class="navarrow">
    					<?php next_posts_link($next_posts_image); ?>
    				</div>
    			<div style="clear:both"></div>
    			</div>
    			<div id="blogdesc">
    				<p class="blogtit"><?php the_title(); ?></p>
    					<style type="text/css">
    					.read-more {
    					 display: none;
    					}
    					</style>
    				<p class="blogdesc"><?php echo $excerpt ?></p>
    				<a class="readmore" href="<?php the_permalink (); ?>">read more...</a>
    			</div>
    		</div>
    		<?php endwhile; ?>
    			<?php else: ?>
    				<div id="post-404" class="noposts">
    				<p><?php _e('None found.','example'); ?></p>
    				</div><!-- /#post-404 -->
    		<?php endif; wp_reset_query(); ?>

    If anyone has any idea, please let me know! I’m tearing my hair out.

  • The topic ‘AJAX pagination – please help…’ is closed to new replies.