• 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?

KenSmith

Active member
#1
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:
http://api.jqueryui.com/tabs/#event-activate

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:
Code:
<script type="text/javascript">
$(function() {
   $('.Tabs').on('tabsactivate', function() { alert('User clicked a tab'); });
});
</script>
Why don't I get an alert on a page like
http://mysite.com/members/1/
when I click another tab like 'Recent Activity'?
 

Jeremy

Well-known member
#2
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.
 

KenSmith

Active member
#3
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:

upload_2013-9-6_13-48-5.png
 

KenSmith

Active member
#5
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.
 

KenSmith

Active member
#6
Referring to the right docs makes all the difference. :p

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

KenSmith

Active member
#8
Thanks Jeremy...
This works, and I assume it looks OK?
Code:
!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);