How do I set options for JHtmlTabs with Bootstrap

Question

According to Using the JHtmlTabs class in a component, several options may be specified for the tabs being rendered. However, using the example, none of the events fire, and the neither the initial "startOffset" or "useCookie" are respected - the page behaves the same whether this code is there or not with no JS errors indicated.

$options = array(
    'onActive' => 'function(title, description){
        console.info("Fired OnActive");                // Never fires
        description.setStyle("display", "block");
        title.addClass("open").removeClass("closed");
    }',
    'onBackground' => 'function(title, description){
        console.info("Fired OnBackground");            // Never fires
        description.setStyle("display", "none");
        title.addClass("closed").removeClass("open");
    }',
    'startOffset' => 4,                                // No tabs are active 
    'useCookie' => true,                               // Last active tab is not rememberd
    'active'    => 'myTabName'                         // Not in docs, but DOES work
);

Update

Realization that I'm using the tabs with Bootstrap, the code is different for JHtml

// This works, per the docs, and using `tabs.start`, etc.
echo JHtml::_('tabs.start', 'tab_group_id', $options);
echo JHtml::_('tabs.panel', JText::_('PANEL_1_TITLE'), 'panel_1_id');
echo 'Panel 1 content can go here.';
echo JHtml::_('tabs.panel', JText::_('PANEL_2_TITLE'), 'panel_2_id');
echo 'Panel 2 content can go here.';
echo JHtml::_('tabs.end');

// This does NOT work, using `bootstrap.` 
echo JHtml::_('bootstrap.startTabSet', 'tab_group_id', $options);
echo JHtml::_('bootstrap.addTab', JText::_('PANEL_1_TITLE'), 'panel_1_id');
echo 'Panel 1 content can go here.';
echo JHtml::_('bootstrap.endTab');
echo JHtml::_('bootstrap.addTab', JText::_('PANEL_2_TITLE'), 'panel_2_id');
echo 'Panel 2 content can go here.';
echo JHtml::_('bootstrap.endTab');

echo JHtml::_('bootstrap.endTabSet');

Has anyone had any luck successfully working with $options and Bootstrap??

Answer 1

This is not an answer to the question, but is a solution to the problem that prompted the question using the jQuery Cookie Plugin:

jQuery(document).ready(function($) {
    var listItems = $("#tab_group_idTabs li");
    var prefix = 'myID-';
    listItems.each(function(li) {
        var a = $(this).children().first("a");
        var word = a.attr('href').replace('#','');
        a.attr('id',prefix+'A-' + word);    // Add an ID to the A
        a.addClass('myTabClass');           // Add a dashboard class to the A
    });

    var activeTab = $.cookie("activeTab");  // Get the last active tab for the page
    if(activeTab === undefined){
        var activeTab = "#myID-A-tab3";     // Specify the default Tab ID here
    }
    $.cookie("activeTab", activeTab);       // Store the last active tab
    $(activeTab).click();                   // Activate the active tab

    $(".myTabClass").click(function(){      // Click event to store last active tab
        var clickedTab = '#'+$(this).attr('id');
        $.cookie("activeTab", clickedTab);
    });
});

Answer 2

Simply this works for me

<?php 
$options = array(
'active'    => 'tab1_id'    // Not in docs, but DOES work
); ?>


<?php echo JHtml::_('bootstrap.startTabSet', 'ID-Tabs-Group', $options);?> 

<?php echo JHtml::_('bootstrap.addTab', 'ID-Tabs-Group', 'tab1_id', JText::_('COM_BOOTSTRAPTABS_TAB_1')); ?> 
<p>Content of the first tab.</p> 
<?php echo JHtml::_('bootstrap.endTab');?> 

<?php echo JHtml::_('bootstrap.addTab', 'ID-Tabs-Group', 'tab2_id', JText::_('COM_BOOTSTRAPTABS_TAB_2')); ?> 
<p>Content of the second tab.</p> 
<?php echo JHtml::_('bootstrap.endTab');?> 

<?php echo JHtml::_('bootstrap.endTabSet');?>

Answer 3

add JHtml::_('behavior.tabstate');

https://www.web357.eu/blog/news/how-to-remember-tab-with-a-session-at-joomla-backend