AJAX Next/Previous Post Link WordPress
- REFUNDED
Hi,
I would like to pull in my next/previous posts with AJAX. Working on a single page theme, so I need to be able to scroll through those posts on the same page.
Here's the post loop:
<div id="content">
<?php query_posts('showposts=1'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">
<div class="post-text">
<h2><?php the_title(); ?></h2>
<div class="post-meta">
<ul>
<li>Posted on <span><?php echo get_the_date('m/d/Y'); ?></span> by <span><?php the_author(); ?></span></li>
</ul>
</div>
<?php the_content(); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<div class="post-nav">
<?php previous_post_link('<div class="prev-post">Next post: <span>%link</span></div>'); ?>
<?php next_post_link('<div class="next-post">Previous post: <span>%link</span></div>'); ?>
</div>
</div>
And here's what I have for jQuery so far:
// Check for hash value in URL
var hash = window.location.hash.substr(1);
var href = J('.post-nav a').each(function(){
var href = J(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
J('#content').load(toLoad)
}
});
J('.post-nav a').click(function(){
var toLoad = J(this).attr('href')+' #content';
J('#content').fadeOut('fast',loadContent);
J('#load').remove();
J('#wrapper').append('<span id="load">LOADING...</span>');
J('#load').fadeIn('normal');
window.location.hash = J(this).attr('href').substr(0,J(this).attr('href').length-5);
function loadContent() {
J('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
J('#content').fadeIn('normal',hideLoader());
}
function hideLoader() {
J('#load').fadeOut('normal');
}
return false;
});
If there is an easier way than what I have here, please feel free to post it!
Mike
Answers (5)
Francisco Javier Carazo Gil answers:
Hi Mike,
Well if you use a plugin, you can reach your target without coding in your theme. I recommend you this plugin:
http://wordpress.org/extend/plugins/ajax-pagination/screenshots/
Francisco Javier Carazo Gil comments:
Maybe this one is also a good option: [[LINK href="http://www.infinite-scroll.com/"]]http://www.infinite-scroll.com/[[/LINK]]
Arnav Joy answers:
i found something in this , may be this can help you
http://wpcanyon.com/tipsandtricks/the-easy-way-to-make-wordpress-ajax-pagination-using-jquery/
or
http://www.wpmods.com/easily-ajax-wordpress-pagination/
or
http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/
Julio Potier answers:
This post can be useful to :
http://www.mygeekpal.com/creating-an-ajax-powered-pagination-in-wordpress/
Ivaylo Draganov answers:
Hello,
you can check out these tutorials on the subject:
[[LINK href="http://css-tricks.com/video-screencasts/81-ajaxing-a-wordpress-theme/"]]http://css-tricks.com/video-screencasts/81-ajaxing-a-wordpress-theme/[[/LINK]]
[[LINK href="http://www.deluxeblogtips.com/2010/05/how-to-ajaxify-wordpress-theme.html"]]http://www.deluxeblogtips.com/2010/05/how-to-ajaxify-wordpress-theme.html[[/LINK]]
Also, there's a trick you can use in single.php to check whether a page is requested via AJAX or not. That way you won't have to filter #content with jQuery, but load the whole page:
[[LINK href="http://pastebin.com/e47sEV1J"]]http://pastebin.com/e47sEV1J[[/LINK]]
Are you using your code on an archive template? Bear in mind that <em>previous/next_post_link()</em> works only on single.php
designchemical answers:
var hash = window.location.hash.substr(1);
var href = J('.post-nav a').each(function(){
var href = J(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
J('#content').load(toLoad)
}
});
J('.post-nav a').click(function(e){
var href = J(this).attr('href');
var toLoad = href+' #content';
J('#wrapper').append('<span id="load">LOADING...</span>');
J('#load').fadeIn('normal');
J('#content').fadeOut('fast').load(href, function(){
J('#content').fadeIn('normal');
J('#load').fadeOut('normal').remove();
});
window.location.hash = J(href).substr(0,J(href).length-5);
e.preventDefault();
});