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

How do I detect a tab change event in XenForo.Tabs?

Discussion in 'XenForo Development Discussions' started by KenSmith, Sep 6, 2013.

  1. KenSmith

    KenSmith Active Member

    In an addon I am developing, I'm using the XenForo.Tabs feature in one of my templates.
    One of the tabs includes a Google map, and I want to create the map only if the user clicks on that particular tab.

    I can't figure out how to fire my custom Javascript when the visitor clicks on the Map tab.
    It seems like I should be able to use the tabsactivate event documented in Jquery UI here:

    As a way to illustrate my issue, if I wanted to do something similar on the member view page of a stock install of XenForo:

    If I edit the 'member_view' template and add this to the top:
    <script type="text/javascript">
    $(function() {
       $('.Tabs').on('tabsactivate', function() { alert('User clicked a tab'); });
    Why don't I get an alert on a page like
    when I click another tab like 'Recent Activity'?
  2. Jeremy

    Jeremy Well-Known Member

    If you are adding your own link into the navigation bar, you should add your own class (Map or MapOverlay for example which would follow XenForo practices) and use XenForo.register() to bind your event to them.

    The links in the navigation bar are not actual tabs.
  3. KenSmith

    KenSmith Active Member

    I'm not talking about the navtab links, but instead the panes inside the member view screen (or a custom template in my actual case.)
    These tabs:

  4. Dan

    Dan Well-Known Member

    Last edited by a moderator: Sep 6, 2013
    KenSmith likes this.
  5. KenSmith

    KenSmith Active Member

    Ah, I've been wading through the wrong stuff all along!
    Until now, I wasn't even aware these were different libraries.
    Thanks for turning on the lightbulb for me.
  6. KenSmith

    KenSmith Active Member

    Referring to the right docs makes all the difference. :p

    With JQuery Tools, this works:
      $('.Tabs').on("onClick", function(event, tabIndex) { alert('User clicked tab ' + tabIndex); });
  7. Jeremy

    Jeremy Well-Known Member

    You should use XenForo.register to insert your code into the XenForo scope.
    KenSmith likes this.
  8. KenSmith

    KenSmith Active Member

    Thanks Jeremy...
    This works, and I assume it looks OK?
    !function($, window, document, _undefined)
       XenForo.ActivateMapTab = function($tabs)
         $tabs.on('onClick', function(event, tabIndex)
           if (tabIndex == 4) {
             alert('ActivateMapTab code here');
       XenForo.register('.Tabs', 'XenForo.ActivateMapTab');
    (jQuery, this, document);
  9. Jeremy

    Jeremy Well-Known Member

    I'm not a master it XenForo JavaScript, but I see nothing glaringly wrong.

Share This Page