How to Register XenForo.Tabs after AJAX calls?

Jaxel

Well-known member
So XenForo has a built in Tabs control system using jQuery that I am implementing as follows:
Code:
<div class="sectionMain sectionChat">

    <ul id="TabNames" class="tabs mainTabs Tabs" data-panes="#TabChats > li">
        <xen:foreach loop="$channels" value="$channel">
            <li><a href="{$requestPaths.requestUri}#tabChat_{$channel.id}">{$channel.name}</a></li>
        </xen:foreach>
    </ul>
  
    <ul id="TabChats" class="chatFix">
        <xen:foreach loop="$channels" value="$channel">
            <li>{xen:raw $channel.chat}</li>
        </xen:foreach>
    </ul>

</div>

This is working perfectly. The `TabNames` control the data panes in `TabChats`.

The problem comes in when I try to add tabs to this tab control through ajax:
Code:
$("#TabNames").append(e.ajaxData.templateHtml);
$("#TabChats").append("<li>"+e.ajaxData.chatHtml+"</li>");

This does add the tab elements to the page properly, however it does not register them as part of the jQuery tab control. Using information that @Chris D provided me with here (#115873), I attemped to reregister the tab control as follows:
Code:
XenForo.activate($(".sectionChat"));

Unfortunately the code above is not working at all and it is not registering the new tabs. Anyone got any ideas what I need to do to register XenForo.Tabs after page load?
 
If you want to see how I'm trying to use it... go here:

http://8wayrun.com/streams/1.imaqtpie,1.thijshs,1.joshog/multi2

On that page, click on the "Add a Stream" button on the bottom right and add a stream (Twitch.TV : 8wayrun). You'll see the video get added, as well as the tab and the chat window.

But you'll also see that the tab and the chat window don't get added to the jQuery tab control. The chat doesn't go invisible like its supposed to, and the tab button itself doesnt switch anything around.
 
Sorry, missed your reply last night.

If this doesn't work:
Code:
XenForo.activate($("#TabNames"));

Try this, instead:
Code:
$(e.ajaxData.templateHtml).xfInsert('appendTo', $("#TabNames"), 'xfFadeIn', XenForo.speed.normal);

I suspect the first block may work. The second actually does a similar thing but it's a more "XF way" of inserting and activating new content (it runs XenForo.activate() automatically). It should only need to be run on the tabs container element itself.
 
Sorry, missed your reply last night.

If this doesn't work:
Code:
XenForo.activate($("#TabNames"));

Try this, instead:
Code:
$(e.ajaxData.templateHtml).xfInsert('appendTo', $("#TabNames"), 'xfFadeIn', XenForo.speed.normal);

I suspect the first block may work. The second actually does a similar thing but it's a more "XF way" of inserting and activating new content (it runs XenForo.activate() automatically). It should only need to be run on the tabs container element itself.
Unfortunately I tried both of these already and neither of them worked.
 
@Chris D the entirety of my JS code right now is as follows:
Code:
    XenForo.MultiAdder = function($form)
    {
        $form.bind('AutoValidationComplete', function(e)
        {
            if (e.ajaxData.templateHtml)
            {
                var html = e.ajaxData.templateHtml.split('=====');
             
                $(html[0]).xfInsert('appendTo', '#TabVideos', 'xfFadeIn');
                $(html[1]).xfInsert('appendTo', '#TabChats', 'xfFadeIn');
                $(html[2]).xfInsert('appendTo', '#TabNames', 'xfFadeIn');
            }
        });
    }

Unfortunately, it never registers the new tab names.
 
Well, this took some figuring out...

I've just built an example that works... I think you need the code to be like this:

Code:
    XenForo.MultiAdder = function($form)
    {
        $form.bind('AutoValidationComplete', function(e)
        {
            if (e.ajaxData.templateHtml)
            {
                var html = e.ajaxData.templateHtml.split('====='),
                      $existingTabs = $('#TabNames'),
                      $api = $existingTabs.data('tabs');
           
                $(html[0]).xfInsert('appendTo', '#TabVideos', 'xfFadeIn');
                $(html[1]).xfInsert('appendTo', '#TabChats', 'xfFadeIn');
                $(html[2]).xfInsert('appendTo', $existingTabs, 'xfFadeIn', XenForo.speed.normal, function()
                {
                    $api.destroy();
                    new XenForo.Tabs($existingTabs);
                });
            }
        });
    }
It calls the jQuery Tools Tabs API to destroy the existing tab config, then creates a new XenForo.Tabs() object using the existing tabs element. This effectively reinitialises the tabs system on the element.
 
Yep... that worked! I wonder how this affects performance though...

Though it tends to be a page filled with video elements, so performance isnt expected to be good in the first place.
 
You're welcome!
I simplified your code as follows... is there any harm in what I did?
Code:
    XenForo.MultiAdder = function($form)
    {
        $form.bind('AutoValidationComplete', function(e)
        {
            if (e.ajaxData.templateHtml)
            {
                var html = e.ajaxData.templateHtml.split('=====');

                $(html[0]).xfInsert('appendTo', '#TabVideos', 'xfFadeIn');
                $(html[1]).xfInsert('appendTo', '#TabChats', 'xfFadeIn');
                $(html[2]).xfInsert('appendTo', '#TabNames', 'xfFadeIn');
           
                $('#TabNames').data('tabs').destroy();
                new XenForo.Tabs($('#TabNames'));
            }
        });
    }
 
@Jaxel thanks for this, you are one of the few developers that I take the time to read through an entire thread. You never end a thread with "got it", always with the solution/fix.

@Chris D you went above and beyond in this thread, thank-you.
 
Top Bottom