How to add an onClick event on Joomla bootstrap tabs.

https://api.joomla.org/cms-3/classes/JHtmlBootstrap.html

echo JHtml::_('bootstrap.startTabSet', 'myTab', array('active' => 'monday'));
echo JHtml::_('bootstrap.addTab', 'myTab', 'monday',  JText::_('MONDAY', true));
// all html code
echo JHtml::_('bootstrap.endTab');
echo JHtml::_('bootstrap.endTabSet');

I have tried

jQuery('#monday').click(function(e) {
    alert('hello');
});

but it doesn't work.

  • Have you tried anything of your own or done any research on the matter so far? – Lodder Jul 7 '15 at 22:47
  • Take a look at tabs events on bootstrap docs. – Rene Korss Jul 8 '15 at 6:14
  • @Lodder This is the only thing I tried jQuery('#monday').click(function(e){alert('hello'); }); and it doesnt work. – Malaiselvan Jul 8 '15 at 20:33
  • @ReneKorss I referred Bootstrap 2.3.2 event and added jQuery('a[data-toggle="tab"]').on('shown', function (e) { alert('working'); }); inside ready and it worked. Thanks – Malaiselvan Jul 8 '15 at 21:16
  • 1
    @Malaiselvan - I know it's been years now but would you mind ading your solution as a proper answer below and marking it as accepted? Thank you – Lodder Oct 13 '17 at 10:53

Here is what worked for me. I'm making an AJAX call, but you can do whatever you want. I added the following to my javascript code in the document ready function. It is stolen and edited from the actual bootstrap framework code, but doesn't override it. I guess you can add multiple functions to the onclick event.

        $(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
        /* These two calls are made in the bootstrap framework code and do not seem to be necessary here. I think this call is adding, not overriding the bootstrap code.*/
        //e.preventDefault();
        //$(this).tab('show');
        var tab_link = e.target.toString();
        var start = tab_link.indexOf('#')+1;
        var tabval = tab_link.substring(start);

        // Make AJAX call to set active_tab.
        jQuery.ajax({
            type: 'POST',
            url: 'index.php?option=com_myjoomlacomponent&format=raw&view=diagnosis&layout=edit&action=setactivetab&tabval='+tabval,
            dataType: 'html',
            success: function (data, status, jq) {
                console.log(status);
            },
            error: function (jq, status, e) {
                console.log('Made AJAX call in document.ready function, error is: '+e+', status is: '+status);
            }
        });
    })

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.