1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to Register XenForo.Tabs after AJAX calls?

Discussion in 'XenForo Development Discussions' started by Jaxel, May 10, 2016.

  1. Jaxel

    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?
     
  2. Jaxel

    Jaxel Well-Known Member

    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.
     
  3. Chris D

    Chris D XenForo Developer Staff Member

    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.
     
  4. Jaxel

    Jaxel Well-Known Member

    Unfortunately I tried both of these already and neither of them worked.
     
  5. Jaxel

    Jaxel Well-Known Member

    @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.
     
    Lawrence likes this.
  6. Chris D

    Chris D XenForo Developer Staff Member

    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.
     
    Lawrence and thedude like this.
  7. Jaxel

    Jaxel Well-Known Member

    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.
     
  8. Chris D

    Chris D XenForo Developer Staff Member

    You're welcome!
     
  9. Jaxel

    Jaxel Well-Known Member

    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'));
                }
            });
        }
     
  10. Lawrence

    Lawrence Well-Known Member

    @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.
     
  11. Jaxel

    Jaxel Well-Known Member

    Kintaro likes this.

Share This Page