Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Add link to show more posts without refreshing page WordPress

You can view the page I'm referencing here: http://theseattlevine.com/wordpress2013/

Specifically, I'm talking about the grid of 6 posts at the bottom of the page.

I want to add a link under those that says "load more" which will load 2 more rows of posts without refreshing the page. I assume this should be done with Ajax, but I am woefully unfamiliar with it.

Here is the code used to display the posts in the grid:

<div id="homegrid">
<?php $gridargs = array(
'posts_per_page' => '6',
'post_type' => array(
'user_article','user_video','user_audio','user_image' ,
),
); ?>
<?php query_posts( $gridargs ) ?>
<?php if (have_posts()) { ?>
<?php $count = 1; ?>
<?php while (have_posts()) { the_post(); ?>
<?php $count++; ?>
<?php if ($count % 3 == 0) { //For every third iteration, give the box a class of "middle" to get the spacing right
$position = 'middle';
} else {
$position = 'sides';
}
?>

<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
$imageid = get_post_thumbnail_id();
$imageattr = wp_get_attachment_image_src($imageid, 'home-grid'); //get an array with url[0], width[1], and height[2]
$imagelink = $imageattr[0];
} elseif (get_field('featured_image')) {
$imageid = get_field('featured_image');
$imageattr = wp_get_attachment_image_src($imageid , 'home-grid');
$imagelink = $imageattr[0];
} else {
$imagelink = get_bloginfo('stylesheet_directory') . '/images/default-100x100.jpg' ;
}
?>


<div class="third section <?php echo $position; ?>" style="background-image:url(<?php echo $imagelink; ?>);">
<div class="third-flag">
<?php pretty_post_types(); ?>
</div>
<div class="third-slide wrap">
<div class="third-slide preview">
<div class="third-slide title">
<?php the_title(); ?>
</div>
<div class="third-slide authordate">
By <a href="<?php echo get_author_posts_url($authorid); ?>"><?php echo $authorname; ?></a> | <?php the_time('m-d-Y'); ?>
</div>
</div>
</div>
<a href="<?php the_permalink(); ?>" class="linkspan"><span></span></a>
</div>


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




<div style="clear:both;"></div>
</div>

Answers (2)

2013-04-15

Daniel Yoen answers:

try this :

jQuery(document).ready(function() {

jQuery(document).on("click", ".linkspan", function(e) {

e.preventDefault();

var varurl = jQuery(this).attr("href");

jQuery.ajax({
type: 'POST',
url: varurl,
dataType: 'html',
success: function (response) {
jQuery("body").html(response);

window.history.pushState(null, null, varurl); // push url

}
});

});

});


Zac Eckstein comments:

Thanks. How would I implement that into the page? What would my <a> tag look like to properly call this?


Daniel Yoen comments:

I got this on your script :

<a href="<?php the_permalink(); ?>" class="linkspan"><span></span></a>

so, I triggered with :

jQuery(document).on("click", ".linkspan", function(e) {

you can change this with your own. :-)

Put the code on footer.php //simple method

<script type="text/javascript">

jQuery(document).ready(function() {

jQuery(document).on("click", ".linkspan", function(e) {
e.preventDefault();
var varurl = jQuery(this).attr("href");

jQuery.ajax({
type: 'POST',
url: varurl,
dataType: 'html',
success: function (response) {
jQuery("body").html(response);

window.history.pushState(null, null, varurl); // push url

}
});
});
});
</script>


I have advance method for this action, just tested and let you know soon, demo link send via PM :-)

best,
Daniel


Daniel Yoen comments:

ref:

jQuery(document).ready(function() {

jQuery(document).on("click", ".linkspan", function(e) {
e.preventDefault();
var varurl = jQuery(this).attr("href");

jQuery.ajax({
type: 'POST',
url: varurl,
dataType: 'html',
success: function (response) {
jQuery("body").html(jQuery(response).find("body"));

window.history.pushState(null, null, varurl); // push url

}
});
});
});

2013-04-15

Yakir Sitbon answers:

Why you are not using with simple .load() method by jQuery (reference: http://api.jquery.com/load/).


Zac Eckstein comments:

I'm open to using it, but I don't know how. Can you show me?


Yakir Sitbon comments:

Put it in your functions.php file:

add_action('admin_footer', 'my_custom_admin_footer');
function my_custom_admin_footer() {
?>
<script type="text/javascript">
(function($) {
$('a.linkspan', '#homegrid').live('click', function(e) {
e.preventDefault();
$('#homegrid')
.css('opacity', '0.75')
.load( $(this ).attr('href') + ' #homegrid' );
window.history.pushState( null, null, $(this ).attr('href') );
});
})(jQuery);
</script>
<?php
}