title: Load jQuery tabs from Ajax
body: <p>I have a loading image that works using the code below. It shows the animated gif and waits for the html to be fetched from the url. Once it is fetched it hides the loading div and loads the html into the bite div. The html that is returned is all contained within jQuery Tabs however when the html is displayed the tabs are not rendered and just the li elements are shown.</p>
  
  <p>Is it possible to fetch this html that contains jQuery tabs via AJAX and render these tabs? If so what am I doing wrong?</p>
  
  <pre><code>&lt;div id="loader" style="text-align:center; display:none;"&gt;
  &lt;img src="img/ajax-loader.gif" alt="LOADING" /&gt;
  &lt;/div&gt;
  
  &lt;div id="bite"&gt;&lt;/div&gt;
  
  $(document).ready(function () {
    $('#loader').show();
    $.ajax({
      url:'http://www.domain.com/bitesized/main.php?uid=&lt;?php echo $uid; ?&gt;',
      complete: function(data){
          $('#loader').hide();
          $('#bite').html(data.responseText);
          // these divs ids are available after the load above and are meant to render the tabs
          $("#tabs").tabs();
          $("#fragment-a").tabs();
      }
    });
  });
  </code></pre>