Capturing 'shown' event from bootstrap tab

Question

I have some \'static\' HTML on my page:

    

        @* 
 nodes will b         


        
      

Answer 1

'show' and 'shown' events didn't work for me. My solution is not exactly specifically OP's situation, but the general concepts are there.

I had the same issue with bootstrap forcing its own onclick events on tabs (menu buttons and content panels). I wanted to lazy load stuff into a panel depending on what menu button was clicked, and some buttons show a panel on the current page, others were to load a page into an iframe.

At first, I stuffed data into a hidden form field tag, which was the same issue. The trick is to detect some sort of change and act on that. I solved the problem by forcing a change and using an alternate event listening on the buttons without having to touch bootstrap.

1) stash iframe target in button as data attribute:

$('#btn_for_iframe').attr('data-url',iframeurl);

2) bind alternate event onto fire off thingy, and inside, swap out the iframe source

$('#btn_for_iframe').on('mouseup',function(){
   console.log(this+' was activated');
   $('#iframe').attr('src',$('#btn_for_iframe').attr('data-url'));
});

3) force 'change' event on panel shows, then load iframe src

$('#iframe_panel_wrapper').show().trigger('change');

or you can put the change trigger in the mouseup above.