BuddyDev

Brajesh Singh in BuddyPress Tricks 36 Comments

You see the Facebook activity stream and you like it. You like the way it automatically loads old activities when you scroll to the bottom of the page.

Do you want to include the activity auto loading on your BuddyPress based social network?

Ok, let me help you do that. Today,  we will see how to load activity automatically when a user scrolls to the bottom of the page.

Strategy:-

• Detect when we have reached at the end of activity stream
• Make an ajax call to load more activities and append it to the page

That sounds easy, doesn't? And yes, It does not need much of the php code, just some javascript.

Let us start coding, we will attach handler to the window scroll event to check if we have reached at the end of the activity. Let us create a file activity-loader.js and put the following lines.

[sourcecode language="javascript"]

jQuery(document).ready(function(

var jq=jQuery;

//attach to the widnow scroll event

));//end of dom ready

[/sourcecode]

Now, we will write the code to attach handler to scroll event

[sourcecode language="javascript"]

jQuery(document).ready(function(

var jq=jQuery;

//let us check on window scroll event
jq(window).scroll(function() {
//find the visible load more button
//since bp does not move load more, we need to find the last one which is visible
//find the position of the button

//check if we have scrolled there

//if yes, let us load more activity

});

));//end of dom ready

[/sourcecode]

So, all we are doing is finding the load more button's position and checking if we have scrolled to there, If yes, we just load more activity

Here is the complete javascript.

Final Javascript Code:-

[sourcecode language="javascript"]

jQuery(document).ready( function() {
var jq=jQuery;
var is_activity_loading=false;//we use it to make sure that we don not try to send the request again and again

//let us check on window scroll event
jq(window).scroll(function() {
//find the visible load more button
//since bp does not move load more, we need to find the last one which is visible
var load_more_btn=jq(".load-more:visible");
//if there is no visible button, there are no mor activities, let us retrn
if(!load_more_btn.get(0))
return;

//find the offset of the button
var pos=load_more_btn.offset();

//if the window height+scrollTop is greater than the offset top, we have reached the button, let us load more activity

if(jq(window).scrollTop() + jq(window).height() > pos.top ) {

load_more_activity();
}

});

/**
* The routine loads more activity
* We call it whenever we reach at the bottom of the activity listing
*
*/
function load_more_activity(){
//check if activity is loading, means is there already a request doing this
//if yes, just return and let the other request handle it
if(is_activity_loading)
return false;

//so, it is a new request, let us set the var to true
is_activity_loading=true;
//add loading class to load more
//theme authors may need to change the selector if there theme has a different id
//I am doing it for bp-default/derivative themes
//change #content to whatever you have named it in your theme
jq("#content 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;

//send the ajax request
jq.post( ajaxurl, {
action: 'activity_get_older_updates',
'cookie': encodeURIComponent(document.cookie),
'page': oldest_page
},
function(response)
{
jq(".load-more").hide();//hide any load more button
jq("#content li.load-more").removeClass('loading');//theme authors, you may need to change it

//update cookie
jq.cookie( 'bp-activity-oldestpage', oldest_page, {
path: '/'
} );

//and append the response
jq("#content ul.activity-list").append(response.contents);

//since we are done, let us set the state that activity has loaded

is_activity_loading=false;
}, 'json' );

return false;
}

});//end of dom ready

[/sourcecode]

We just need to include this javascript file and we are done.

Assuming that you have put activity-loader.js in your theme's _inc dir.

here is the code that you can put in your theme's functions.php

[sourcecode language="php"]

function bp_activity_autoloader_inc_js(){
//you can change get_stylesheet_directory_uri() to get_tmplate_directory_uri() if you are author of a parent theme and want to include it in parent theme and not in the child theme.
wp_enqueue_script('activity-auto-loader', get_stylesheet_directory_uri().'/_inc/activity-loader.js',array('jquery'));//should we make it dependent on 'dtheme-ajax-js'?
}
add_action('bp_enqueue_scripts','bp_activity_autoloader_inc_js',30);

[/sourcecode]

If you are running a theme based on bp-default, you don't even need to go through all thees steps. I have packed it as a plugin, just drop it and boom! Your network becomes even more awesome 🙂

If you are using a custom theme, not a derivative of bp-default, you may have to change the ids I have used(e.g #content to something which you theme uses for layout, please see the comments in the js code). I have tested it with BuddyPress 1.6.4 and BuddyPress 1.7 beta/trunk(with bp-default/theme compat) and It works.

So, what do you think about it? I hope that you will like this. I will appreciate your feedback if you are using it or plan to use it .

If you need it as a plugin, here is the link.

Plugin Download & Installation:-

Link:- https://buddydev.com/plugins/bp-activity-autoloader/

Please note, this code depends on jQuery cookie plugin, make sure you have it included in your theme(bp-default does have it).