[juanmaguerrero]

Hi! I’m trying to emulate facebook “auto-load-more” activity, that when the user scroll down to almost the bottom of the activity stream page, more items are automatically added at the bottom of all and so on.
Below is another comment of mine with the code for you to apply on your site. I’ve accomplished the feature but yet didn’t have the time to make it a plugin, so, you’ll have to copy/paste the code on your site for now…

[Prince Abiola Ogundipe]

@juanmaguerrero, please let me know if this works well as i will be interested in this aswell.

regards

[abysshorror]

Cool ! I’ve tried it but it didn’t work

Where should I add that code ?

[Prince Abiola Ogundipe]

@juanmaguerrero, i am not a coder, but i can place code in my function.php. you can please paste the complete code with a bit of explanation because of many nobe like me.

i know many will be so grateful if this function did work. auto load more function rocks

regards

[abysshorror]

@juanmaguerrero por favor, I’d also need the tutorial

Thanks !

[admin25]

take this:

function ajax_auto_load_activity(){
…code goes here…
};

and this:

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;

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);

target.parent().hide();
}, ‘json’ );

and go like this:
function ajax_auto_load_activity(){
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;

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);

target.parent().hide();
}, ‘json’ );
};

I do not know if it works but that is what was said to do.

[juanmaguerrero]

Hi everyone, sorry for the delay, I was on holidays. Tonight or tomorrow I’ll be adding the script and a tutorial. Regards!

[Prince Abiola Ogundipe]

@juanmaguerrero, thanks so much, will be waiting….

Regards

[funmi omoba]

@juanmaguerrero, how far about the tutorial, i have been following your thread for a while. i am interested in this code aswell.

thanks

[juanmaguerrero]

Sorry everyone for the delay… major force personal issues… hope soon (before next week) will post here the tutorial and the code. regards!

[funmi omoba]

@juanmaguerrero,any update on the tutorial.

Thanks

[juanmaguerrero]

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
IMPORTANT UPDATE: Since a few pals here have tested and found some things to correct, I have addeded this correction (so now it works OK, yay!):

Below this:

<div id="message" class="info">

</div>

Add this:

jq('.pixelMonitor').remove();
jq(document).unbind('scroll');

:::::::::::::::::::::::::::::::::: END OF THE UPDATE ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Hi, all, @naijaping @abysshorror @funmi-omoba

I finally found the time to work on this. I’ll post a detailed explanation on my blog later but here it goes for you to be able to use it right away. I’ll maybe make a plugin of all this, and some code you’ll have to tweak will be overridden if you update your buddypress theme but by that time I hope this will be improved and I’ll post to you back with the updates.

So:

1) Edit the file: /wp-content/plugins/buddypress/bp-themes/bp-default/activity/activity-loop.php (around line 38) This assumes you're using the default theme, if not, do it in your other theme file.

// Change:

<li class="load-more">
<a href="#more"></a>
</li>

// For this:

jq('.pixelMonitor').remove();
jq(document).unbind('scroll');

// 2) Add this at the bottom of that file:

<div class="pixelMonitor" style="width: 1px;height: 1px">
<div id="loadingActivityMessage" style="background-color: white;float: right;height: 16px;padding: 4px 2px 4px 39px;width: 100px">Loading...</div>
</div>

/* Auto load more updates at the end of the page when reaching the bottom of the page */

jq(document).ready( function() {

iterationAllowed = true;

function loadActivityOnScroll(){

jq("#loadingActivityMessage").show();

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("#loadingActivityMessage").hide();
jq.cookie( 'bp-activity-oldestpage', oldest_page, {path: '/'} );
jq("#content ul.activity-list").append(response.contents);

}, 'json' );

return false;

};

jq(document).scroll(function(){

if ( Math.round(jq('.pixelMonitor').last().offset().top) > ( jq(document).height() -500 ) && iterationAllowed === true ) {
loadActivityOnScroll();
iterationAllowed = false;
setTimeout('iterationAllowed = true', 3000);
};

});

}); /* Auto load more activity block ending here */

Hope you enjoy it. In near future I hope I’ll have it as a plugin and I’ll post it here to let you know.

Some demo: http://www.horizontea.com/ (scroll to the bottom to see in action).

PS: I’m not saying this is bug free, but will not affect any data on your db or installation, it just tweaks the interface Cheers!

PS 2: As soon as I check the “WP/BP” way to add this code to the file “automatically” (as a plugin) I’ll update it.

[9087877]

@juanmaguerrero Works great until it hits a dead end and there is no more activities. Then if you keep trying to scroll down it repeats over and over “Sorry, there was no activity found. Please try a different filter.” Is there a way you can tweak the code to make it only display that message one time when it reaches the end of activities? It works great, but it would just look cleaner if it did not repeat that message over, and over as a user attempts to scroll when there is no more activities to display. Also, how do you get that neat loader like you have on your site while more activities is loading? What does it involve? Can you share how to accomplish this? Thanks, and great job!

[juanmaguerrero]

Hi, @shawn38 I have updated the code in the previous comment I made with that bug fixed. Please copy/paste it now and it’ll work fine. As you mention, my “example” has an image (loading bar gif) included, that you can easily add by adding some style and the image. In my example, I used:

<div id="loadingActivityMessage">Loading...</div>

[James]

hi @juanmaguerrero, great tutorial!
unfortunately, bug that @shawn38 has mentioned partly is still there. Go to site wide activities, switch to “updates” as drop down filter – everything still will work fine, but now refresh page and bug is back again. If you have custom bp_has_members loop on separate page, bug is always there. Have to say that for those, who really needs this functionality, it is not so terrible. thanks again!

[juanmaguerrero]

hi, @janismo I cannot reproduce the bug you mention. It currently does not support the dropdown list change, but no “error” is visibly shown. Maybe you are using some tweaked code that I don’t know… could you provide more details about the bp_has_members loop customization you made? thanks!

[James]

hi again @juanmaguerrero, I do not have any customizations, just child theme of bp-default (local at the moment) and your 2 steps. When I switch to “updates” in drop-down of site wide activity directory, I see my 3 activity updates. Now I press page refresh, 3 activities are still there, but every move of scroll bar returns “Sorry, there was no activity found. Please try a different filter.”

If you won’t be able to recreate it again, will send you some video from my test site in approx. 10 hours, it’s already night here. Drop me some email. thanks!

[juanmaguerrero]

Hi, @James I could not reproduce the error. The string “Sorry, there was no activity found. Please try a different filter.” Is not able to be shown unless you’ve made the changes in the template wrong or something I cannot see. You’re welcome to post a video but there’s no way I can send you an email through here. Regards

[James]

hi @juanmaguerrero, no need in video. after deeper testing I understood the issue. Bug remains in every activity list, where you do not have enough of updates to see “load more” button. Create a group with few updates and scroll to the bottom. Script will keep adding more and more “Sorry, there was no activity found. Please try a different filter.” even without refresh.

[juanmaguerrero]

@janismo (James) now i’ve got it! Thanks for your help, man! Now I was finally able to reproduce it. The bug is caused in activity streams were no “load more” button was intended to be shown. I have to Tweak it again, will post it tonight/tomorrow morning but with help from people like you I think we’ll have a pretty “bullet-proof” snippet !

Thanks a lot, again, will update as soon as I fixed this altogether with the dropdown filter change support.

[landwire]

Hi Juan,
that is such a cool solution! Cannot wait until you had time to update the snippet and then I will try it out on my new install.

Thanks for this,
Sascha

BTW: Do you know where I can find a snippet that auto loads more WP posts?

[juanmaguerrero]

Hi, @landwire, thanks for you comments, I’ll update the snippet within this week. I don’t want to go off topic a lot but you could accomplish that task by AJAX: http://tomsbigbox.com/wordpress-load-more-posts-on-page-scroll/ Hope it helps! Regards

[juanmaguerrero]

Hi, all, all fixed now. Below this:

<div id="message" class="info">
</div>

Add this:

jq('.pixelMonitor').remove();
jq(document).unbind('scroll');

That’s it! You can change the text “Sorry, there was no activity found. Please try a different filter.” for something more customized for the purposes of this feature… cheers!

[9087877]

@juanmaguerrero Hi! I was just curious if you have had any luck packaging your “auto load more” code snippet as a plugin? It would be an awesome contribution to the buddypress community. Thanks and best regards!

[juanmaguerrero]

Hi, @shawn38 Glad to see someone found this useful

I have actually optimized the code to work flawless and best performing. I could make a plugin with it just have to learn how to replace some code that is already given with BuddyPress, I will investigate that today and hopefully upload the plugin really soon. Will let you know with another message here. Thanks a lot for your encouraging words!

[StudioManager]

Juan, I would so donate to that plugin. Before something broke in 1.6.1 (not your code) it was awesome for smoothness. To have it as a plugin so i didn’t have to re-add it everytime soemthing else changed would be a life-saver!!!!