Im trying to get infinite scroll inside of a div to work based off of the set up in this theme. It has a "load more" link at the bottom of the list that when clicked, loads content via ajax. Im working with WP (latest) and Buddypress (latest). I found a little trick to basically going around it, since I'm not the best at query and php. It half works, as it does trigger the triggered "click" and loads the content, but every time a user continues to scroll, it continues to load content. It loads the last two sets (duplicates), then gives the error when there is no content to load per scroll, which by default only shows when there isn't any content to load during page load. First, this is the script in which the "load more" link uses to work:
jq('div.activity').click( function(event) {
var target = jq(event.target);
if ( target.parent().hasClass('load-more') ) {
jq("li.load-more").addClass('loading');
if ( null == jq.cookie('bp-activity-oldestpage') )
jq.cookie('bp-activity-oldestpage', 1, {path: '/'} );
var oldest_page = ( jq.cookie('bp-activity-oldestpage') * 1 ) + 1;
jq.post( ajaxurl, {
action: 'activity_get_older_updates',
'cookie': encodeURIComponent(document.cookie),
'page': oldest_page
},
function(response)
{
jq("#content li.load-more").removeClass('loading');
jq.cookie( 'bp-activity-oldestpage', oldest_page, {path: '/'} );
jq("#content ul.activity-list").append( response.contents, function(){
jq('li.post').hide().each(function(index) {
timeOuts[index] = setTimeout(myFadeIn, index*100, jq(this));
});
});
target.parent().hide();
}, 'json' );
return false;
}
});
});
this is the little work around that triggers to click that link when a user has scrolled to end of the #content div:
jq( function($) {
$('#content').bind('scroll', function() {
if($(this).scrollTop() +
$(this).innerHeight()
>= $(this)[0].scrollHeight)
{
jq("#content li.load-more a").trigger('click', function(e){
e.preventDefault();
});
}
})
});
Here's the Html that includes the loop just incase:
<div id="content">
<div class="activity">
<?php if ( bp_has_activities( bp_ajax_querystring( 'activity' ) ) ) : ?>
<?php /* Show pagination if JS is not enabled, since the "Load More" link will do nothing */ ?>
<noscript>
<div class="pagination">
<div class="pag-count"><?php bp_activity_pagination_count(); ?></div>
<div class="pagination-links"><?php bp_activity_pagination_links(); ?></div>
</div>
</noscript>
<?php if ( empty( $_POST['page'] ) ) : ?>
<ul id="activity-stream" class="activity-list item-list">
<?php endif; ?>
<?php while ( bp_activities() ) : bp_the_activity(); ?>
<?php locate_template( array( 'activity/entry.php' ), true, false ); ?>
<?php endwhile; ?>
<?php if ( bp_activity_has_more_items() ) : ?>
<li class="load-more yori">
<a class="thiss" href="#more"><?php _e( 'Load More', 'buddypress' ); ?></a>
</li>
<?php endif; ?>
<?php if ( empty( $_POST['page'] ) ) : ?>
</ul>
<?php endif; ?>
<?php else : ?>
<div id="message" class="info">
<p><?php _e( 'Sorry, there was no activity found. Please try a different filter.', 'buddypress' ); ?></p>
</div>
<?php endif; ?>
</div>
</div>
As i said, it works, but it comes with errors and its rather sloppy, cause I know there is a cleaner way to get this done lol. Thats what i'm trying to figure out. I tried so many infinite scroll plugins, including the one from WP, but they don't seem to work with what i'm trying to do. Im thinking it has something to do with the way that Buddypress has the "load-more" set up. Nothing is impossible though, thats why I need you guys to help :)
I have achieved that functionality, I explain it here with the code snippet for you to apply. Cheers ;)