Add a Ajax loading icon in BuddyPress Directories

Last updated on by

NOTE: This is in our planned feature now, we will add this in our wplms 2.0.8 update. Right now this tip is not working properly.

We got several requests for this feature, so here’s how you can do it.

a. Go to WP Admin -> Plugins -> Editor ->WPLMS Customizer -> customizer_class.php

b. Add this code in _construct function :

PHP Code:
add_action('bp_after_directory_course_content',array($this,'add_loader_in_directory'));
add_action('bp_after_directory_groups_content',array($this,'add_loader_in_directory'));
add_action('bp_after_directory_members_content',array($this,'add_loader_in_directory'));
add_action('bp_after_directory_forums_content',array($this,'add_loader_in_directory'));
add_action('bp_after_directory_activity_content',array($this,'add_loader_in_directory'));

c. Add this code in the class:

PHP Code:
function add_loader_in_directory(){
echo '<script>
jQuery(document).ready(function($){
$("#ajaxloader").on("ajaxStart",function(){
        $(this).parent().addClass("fademask");
        $(this).removeClass("disabled");
    });
    $("#ajaxloader").on("ajaxStop",function(){
        $(this).addClass("disabled");
        $(this).parent().removeClass("fademask");
    });
  });
</script>';
echo '<div id="ajaxloader" class="disabled"></div>';
echo '<style>
.fademask{
    opacity: 0.6;
}</style>';
}