How to add an onClick event on Joomla bootstrap tabs.


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) {

but it doesn't work.

  • Have you tried anything of your own or done any research on the matter so far?
    – Lodder
    Commented Jul 7, 2015 at 22:47
  • Take a look at tabs events on bootstrap docs.
    – Rene Korss
    Commented Jul 8, 2015 at 6:14
  • @Lodder This is the only thing I tried jQuery('#monday').click(function(e){alert('hello'); }); and it doesnt work. Commented Jul 8, 2015 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 Commented Jul 8, 2015 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
    Commented Oct 13, 2017 at 10:53

1 Answer 1


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.*/
        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.
            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) {
            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 agree to our terms of service and acknowledge you have read our privacy policy.

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