Access label of currently active tab?

Questions
10

Hey Barry,

I’m not actually leaving the tab label empty. I’m doing this: https://community.skuid.com/t/toggle-tab-labels-on-off
So, the label on teach tab looks something like:

{{#$Model.ShowTabs.data.0.Chart_Tab_Names__c}}Case Summary{{/$Model.ShowTabs.data.0.Chart_Tab_Names__c}}

If the user has Chart_Tab_Names__c = true, the label shows up, otherwise, we just see the icon.

I’d like to be able to show the tab label above the tabset in a template either way.

I decided to go ahead and use the unique ID. I had to include a ‘replace’, because I wanted spaces in my display, but you can’t have spaces in the unique id.

Here’s my new code:

(function(skuid){ var $ = skuid.$;<br>// helper to locate the text by using tab Id<br>var getTabById = function(tab) {<br> &nbsp; &nbsp;// get the id of the tab<br> &nbsp; &nbsp;var tabId = $(tab).attr('id');<br> &nbsp; &nbsp;return tabId.replace("_"," ");<br>};<br>// update the text of the span with the name from the tab label<br>var setTabName = function(tab){<br> &nbsp; &nbsp;var tabLabel = getTabById(tab); // lookup the label text for the tab<br>&nbsp; &nbsp; &nbsp; &nbsp; $('span.tabname').text(tabLabel);<br>};<br>// document ready function<br>&nbsp; &nbsp; $(function(){<br> &nbsp; &nbsp;// hook the tabshow event so that as user clicks on tab<br> &nbsp; &nbsp;// we update the template field with the label from the tab<br>&nbsp; &nbsp; &nbsp; &nbsp; $('body').on('tabshow',function(event){<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return setTabName(event.target);<br>&nbsp; &nbsp; &nbsp; &nbsp; });<br>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<br>&nbsp; &nbsp; &nbsp; &nbsp; // get first tab name to set template on page load<br>&nbsp; &nbsp; &nbsp; &nbsp; var tabSet = $('#tabdemo'), // find the tabset<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; firstTab = $(tabSet).children('.ui-tabs-panel:visible');<br>&nbsp; &nbsp; &nbsp; &nbsp; return setTabName(firstTab);<br>});<br>})(skuid);