Assuming you’re already loading jQuery in your header with something like this <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> just add the following before the </head> tag…
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
jQuery('#object-nav a, #subnav a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#nav-ajax').html('<p class="ajaxing">Loading</p>');
jQuery('#nav-ajax').load(link+' #nav-ajax');
});
});
</script>
To write this script, I chose what links I wanted to make the call – for profile navigation that’s those in #object-nav and #subnav.
Then you have to wrap the elements you want to get loaded in a div – in this case I used <div id="nax-ajax"> and wrapped it around the entire item-body div in my theme’s members/single/home.php…. Like so
<div id="nav-ajax">
<div id="item-body">
<?php do_action( 'bp_before_member_body' ) ?>
<?php if ( bp_is_user_activity() || !bp_current_component() ) : ?>
<?php locate_template( array( 'members/single/activity.php' ), true ) ?>
<?php elseif ( bp_is_user_blogs() ) : ?>
<?php locate_template( array( 'members/single/blogs.php' ), true ) ?>
<?php elseif ( bp_is_user_friends() ) : ?>
<?php locate_template( array( 'members/single/friends.php' ), true ) ?>
<?php elseif ( bp_is_user_groups() ) : ?>
<?php locate_template( array( 'members/single/groups.php' ), true ) ?>
<?php elseif ( bp_is_user_messages() ) : ?>
<?php locate_template( array( 'members/single/messages.php' ), true ) ?>
<?php elseif ( bp_is_user_profile() ) : ?>
<?php locate_template( array( 'members/single/profile.php' ), true ) ?>
<?php else : ?>
<?php
/* If nothing sticks, just load a member front template if one exists. */
locate_template( array( 'members/single/front.php' ), true );
?>
<?php endif; ?>
<?php do_action( 'bp_after_member_body' ) ?>
</div><!-- #item-body -->
<?php do_action( 'bp_after_member_home_content' ) ?>
</div> <!-- #nav-ajax -->
</div><!-- .padder -->
</div><!-- #content -->
You also have to do the same thing for the members/single/plugins.php with the same div. Just style the p class=”ajaxing” however you want in your default stylesheet. The process works the same for groups as well. I had problems getting a:active css attributes to show, but besides that it’s worked just fine.
Oh, and thanks for the compliments!
