Question

I am using jQuery UI‘s tab view. I have included my HTML below, it’s a slimmed down version of what I have.

<div id="UserDetailsTabs">

     <ul>
          <li><a href="#tabs-1">User Details</a></li>
          <li><a href="#tabs-2">Impersonation Details</a></li>
     </ul>

     <div id="tabs-1">
          <p>Tab 1 content</p>
     </div>

     <div id="tabs-2">
          <p>Tab 2 content</p>
     </div>

</div>

Here is my jQuery code to create the tab:

$(document).ready(function () {
     $("#UserDetailsTabs").tabs();
});

Is there a way of determining when a tab’s content has finished rendering after clicking on a tab? What I mean is if I click on tabs-2, is there a function that can be called after the contents of the selected tab has been finished rendering?

Answer 1

$("#UserDetailsTabs").tabs({load: function(event, ui) { 
    alert('tabs loaded')    
});
//This will trigger when user clicks a tab after the page load
$( "#UserDetailsTabs" ).tabs({
   show: function(event, ui) { alert('clicked on the tabs'); }
});