AJAX Profile Tabs

* This topic is for testing, bugs may be present and if found should be reported to THIS topic *

Hello,

This project of mine is for allowing the tabs of the advanced profile load their contents without reloading the entire page. You can see an example by going to my profile and clicking the tabs.
http://fmdesign.forumotion.com/u1



Currently I have it working on phpbb3 and punbb. Please note that on phpbb2 and invision this does not currently work.

To apply and test this :
* the advanced profile must be active
* your forum version must be phpbb3 or punbb

Administration panel > Modules > Javascript codes management > Create a new script

Title : AJAX Profile Tabs
Placement : in all the pages
Paste the code below and save :

Code:

$(function() { 
    var at = 'activetab';
    var ti = '#tabs li';
    var pa = ' #profile-advanced-details';
    var ta = '#tabs a';
    var taa = '#tabs .activetab a';
    var atl = '#ajaxTabLoad';
    var uw = '#userWall';
    var up = '#userProfile';
    var us = '#userStats';
    var ua = '#userAttach';
    var uf = '#userFriends';
    var uc = '#userContact';
    var ur = '#userRPG';

    var L = location.pathname;
    var uid = L.replace(/\/u/,'').replace(/wall/,'').replace(/stats/,'').replace(/friends/,'').replace(/contact/,'').replace(/rpg/,'').replace(/attachments/,'');
    var wall = '/u'+uid+'wall';
    var prof = '/u'+uid;
    var stat = '/u'+uid+'stats';
    var atta = '/u'+uid+'attachments';
    var frnd = '/u'+uid+'friends';
    var cnat = '/u'+uid+'contact';
    var rpg = '/u'+uid+'rpg';

    var load = '<div class="tabLoading panel row3 main-content clearfix" style="font-size:18px;text-align:center;padding:10px;">Loading...</div>';
 
    var notAct = function() { $(ti).removeClass(at) };

    if (document.getElementById('profile-advanced-layout')) {

        if (L == wall) { $(taa).attr('href',wall) }
        if (L == prof) { $(taa).attr('href',prof) }
        if (L == stat) { $(taa).attr('href',stat) }
        if (L == atta) { $(taa).attr('href',atta) }
        if (L == frnd) { $(taa).attr('href',frnd) }
        if (L == cnat) { $(taa).attr('href',cnat) }
        if (L == rpg) { $(taa).attr('href',rpg) }

        $(ta).click(function() { return false });
        $(pa).wrap('<div id="ajaxTabLoad" style="margin-right:4px;"></div>');
        $(ta+'[href="'+wall+'"]').attr('id','userWall');
        $(ta+'[href="'+prof+'"]').attr('id','userProfile');
        $(ta+'[href="'+stat+'"]').attr('id','userStats');
        $(ta+'[href="'+atta+'"]').attr('id','userAttach');
        $(ta+'[href="'+frnd+'"]').attr('id','userFriends');
        $(ta+'[href="'+cnat+'"]').attr('id','userContact');
        $(ta+'[href="'+rpg+'"]').attr('id','userRPG');

    }

    $(uw).click(function() {
        if ($(this).closest('li').attr('class') == at) { return; }
        notAct();
        $(ti+':has('+uw+')').addClass(at);
        $(atl).html(load).load(wall + pa);
    });

    $(up).click(function() {
        if ($(this).closest('li').attr('class') == at) { return; }
        notAct();
        $(ti+':has('+up+')').addClass(at);
        $(atl).html(load).load(prof + pa);
    });

    $(us).click(function() {
        if ($(this).closest('li').attr('class') == at) { return; }
        notAct();
        $(ti+':has('+us+')').addClass(at);
        $(atl).html(load).load(stat + pa);
    });
   
    $(ua).click(function() {
        if ($(this).closest('li').attr('class') == at) { return; }
        notAct();
        $(ti+':has('+ua+')').addClass(at);
        $(atl).html(load).load(atta + pa);
    });

    $(uf).click(function() {
        if ($(this).closest('li').attr('class') == at) { return; }
        notAct();
        $(ti+':has('+uf+')').addClass(at);
        $(atl).html(load).load(frnd + pa);
    });

    $(uc).click(function() {
        if ($(this).closest('li').attr('class') == at) { return; }
        notAct();
        $(ti+':has('+uc+')').addClass(at);
        $(atl).html(load).load(cnat + pa);
    });
 
    $(ur).click(function() {
        if ($(this).closest('li').attr('class') == at) { return; }
        notAct();
        $(ti+':has('+ur+')').addClass(at);
        $(atl).html(load).load(rpg + pa);
    });
});

Once you have it enable you can go to your profile and test the tabs. If you encounter any bugs you may report it to this topic.

Many thanks and happy testing

Hello,

I have made a few updates to the AJAX profile tabs. History pushstate has been removed and replaced with a better method to prevent the tabs from reloading the currently active. The amount of characters used has been reduced some as well. The updated script is above if you want to use it.

For previous version you can copy from this file : http://www.mediafire.com/view/fto2558xrzsflyy/AJAX%20Profile%20Tabs.txt

The new file can also be copied from here : http://www.mediafire.com/view/q88g1xce9znsxm8/AJAX_Profile_Tabs_v2.txt

Actually spotted something with this and meant to mention it the other day but forgot. But when you scroll down in one of the tabs the little avatars scroll with it I guess. I don't know if it's suppose to do that but I thought it might be worth mentioning. I have screen shots on my computer but you could probably see for yourself before I get the chance to get on it and post them.

Oh yes, It was designed to float on the right like that. It could be changed if it poses a problem. It also acts as 'view profile' since I have included the user url on it.

Alright. I think it's fine like that, just wasn't sure if it was supposed to. I don't see it posing any problems though.

nice tutorial! again very helpful! thanx Ange!

Selvester wrote:Alright. :)I think it's fine like that, just wasn't sure if it was supposed to. I don't see it posing any problems though.

That is good then.

I think we mixed the topics,  the question was for the popup, right ?

Rhino.Freak wrote:nice tutorial! again very helpful! thanx Ange!

You're welcome

Ange Tuteur wrote:

Selvester wrote:Alright. :)I think it's fine like that, just wasn't sure if it was supposed to. I don't see it posing any problems though.

That is good then.

I think we mixed the topics,  the question was for the popup, right ?

... Oops... Yeah that should have been for the popup. XD My bad! This one is brilliant too though and hasn't shown any problems. Seems to work perfectly!

Heehee yes, I didn't notice either though

Very good

This one is working fine, only recently I noticed a mistake of mine. The new message bouton for the VM does not load, at least on here I think. I will need to fix that.

hi again! just noticed that it doesn't work when Attachments are enabled .. can you fix it? thanks

I can't believe I forgot that !!

Thanks for pointing that out, the code in the first post should now be updated.

Good !

Hopefully that's all of them now !

Yo, I don't know why but the tabs not work for me :/ any idea why? i do everything what you say in first topic    

Do you get any errors in your browser console ? Press the F12 key.

I don't know.

I just checked your forum and i found a lot of errors

Uncaught SyntaxError: Unexpected identifier 99183.js:1
Uncaught SyntaxError: Unexpected token ILLEGAL 13336.js:1
Failed to load resource http://cdn.viglink.com/api/vglnk.js
Uncaught TypeError: Object [object global] has no method 'updateIframeSize' h1-:107
Failed to load resource http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?_=1402067089198
Uncaught TypeError: Cannot call method 'split' of undefined 0B1KYB697LuNxVUlqTDVLTXNHSkU:441
15
Uncaugh

You need to sort these errors out.

Ummm i think today you fix my error but the buttons still not work.

bump?

I would have to look into it since it works fine on default phpBB3