What is the complete function? What does your Javascript look like?
Thread Starter
obidos
(@obidos)
Hi there,
It’s PHP and it’s in functions.php. Basically I have created an AJAX call to do lazy loading for more posts.
Here is the full function which is triggered by a button on the front end and activated with jquery.
function load_more_callback()
{
global $wpdb;// Allow direct access to db
// Get 'posts_per_page' from WP options
$perpage = get_option( 'posts_per_page', 4 );
// Check what page we are on for AJAX call
$postname = '';
//$post_id = $_GET['post'] ? $_GET['post'] : $_POST['post_ID'] ;
$slug = basename(get_permalink());
if ( $slug == 'boutiques' ) {
$postname = 'boutiques';
} elseif ( $slug == 'tourist' ) {
$postname = 'tourist';
}
else {
$postname = 'post';
}
$numposts = number_format( $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->posts WHERE post_status = 'publish' AND post_type = '.$postname.'") );
// Set default JSON vars
$data['response'] = FALSE;
$data['html'] = '';
$data['perpage'] = $perpage;
$data['more'] = TRUE;
// Retrieve posts (starting from requested offset)
$args = array(
'post_type' => $postname,
'numberposts' => get_option( 'posts_per_page', 4 ),
'offset' => $_POST['offset']
);
$posts = get_posts( $args );
// If we have found posts to return
if ( count( $posts ) > 0 )
{
// Loop through posts to create html
foreach( $posts as $p )
{
setup_postdata( $p );
$desc = truncate(get_the_content(), 345);
$imgset = get_the_post_thumbnail( $p->ID, 'thumbnail');
$data['html'].= '<article class="'.$p->ID.'">'.$imgset.'
<div class="textblock">
<h2><a href="'.get_permalink( $p->ID ).'">'.get_the_title( $p->ID ).'</a></h2>
<p class="date">'.get_the_time( 'jS F Y', $p->ID ).'</p>
<p>'.$desc.'</p>
<a href="'.get_permalink( $p->ID ).'">Read full post...</a>
</div>
</article>';
}
$data['response'] = TRUE;
}
// If we have loaded all available posts, tell theme to remove more button
if ( ( $_POST['offset'] + $perpage ) >= $numposts )
{
$data['more'] = FALSE;
}
echo json_encode($data);
die(); // this is required to return a proper result
}
What does your Javascript look like?
I think you are going to have to do it like this:
- When your Javascript triggers, check the page for the post ID and any other information you need. This is in the Javascript, not the callback. You need to use the Javascript to read the data on the current page.
- Send a POST or GET (GET makes more sense) request to get the next set of posts, passing the post ID/other information with it. This is where your callback comes in.
- Rewrite the page with the POST of GET results
The reason is that as soon as you make a new request with Javascript, you aren’t ‘on the page’ anymore. It is a new request and a new page. Does that make sense?
There are other ways to do it, possibly better ways. You could track the current page in a cookie, for example.
Thread Starter
obidos
(@obidos)
Hi there,
Thank you for your help. I am looking in to a solution as you said.
Here is my jquery that calls the AJAX:-
/* LOAD POSTS -------------------------------- */
var curr = MyAjax.perpage;
$('.more').click(function()
{
$('.more span').addClass('hidden').next().removeClass('hidden');
$.ajax(
{
url: MyAjax.ajaxurl,
dataType: 'json',
data: 'action=load_more&offset='+curr,
type: 'POST',
success: function(data)
{
curr+= parseFloat(data.perpage);
$('.more').before( data.html );
$('article:nth-child(5n+5)').addClass('remove');
if ( data.more == false )
{
$('.more').remove();
}
curr += data.perpage;
$('.more img').addClass('hidden').prev().removeClass('hidden');
}
});
return false;
});
Ok. So do what I said earlier. You need all the same information you’d need if you were constructing any other paged loop.
http://weblogtoolscollection.com/archives/2008/04/19/paging-and-custom-wordpress-loops/
Thread Starter
obidos
(@obidos)
Thank you so much for your help. Not had much chance to look until today but going to figure it out.
Thread Starter
obidos
(@obidos)
Hmm ok so I have the paged loop set and working to call my posts for my custom post types. This is how it looks:-
<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('showposts=4'.'post_type=tourist'.'&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post();
?>
<article>
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('thumbnail');
}
?>
<div class="textblock">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="date"><?php the_date('jS F Y'); ?></p>
<ul>
<li><a class="facebook " href="http://www.facebook.com/sharer.php?u=<?php echo get_permalink($post->ID); ?>&t=<?php echo the_title(); ?>" target="_blank">Like</a></li>
<li><a class="twitter" href="http://twitter.com/home?status=Currently reading <?php the_permalink(); ?>">Tweet</a></li>
</ul>
<?php echo truncate(get_the_content(), 345); ?> <a href="<?php the_permalink(); ?>">Read full post...</a>
</div>
</article>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php previous_posts_link('« Previous') ?></div>
<div class="alignright"><?php next_posts_link('More »') ?></div>
</div>
<?php $wp_query = null; $wp_query = $temp;?>
I am new to AJAX so stuggling to know what to do next.
Any advice or instruction on how to turn this in to a lazy loading with my jquery above?
You would send your Javascript request to that PHP script, passing in all the values you need via GET or POST. Your PHP should return a string. As it is you are (sort of) echoing inline every time you close a PHP tag and write HTML. You would then replace the current post markup with the markup returned by your PHP script.
