title: Jquery UI Tab - ajax tab wont finish loading when not clicked
body: <p>I have a problem on my UI Tabs, when I use add function with an ajax url, the new tab wont load until I click it or use the select function, is there any way to finish the ajax loaded tab first before I will use the select? I use this <code>$tabs.tabs('select', '#' + ui.panel.id);</code> to select the tab upon add, but sometimes it takes a while for the ajax to finish and it doesnt look good.</p>
  
  <p><strong>This is how I initialize tab:</strong></p>
  
  <pre><code>var $tabs = $(".tabs").tabs({
      ajaxOptions: {
          cache: false,
          success: function(xhr, status) {}
      },
      cache: true,
      spinner: '&amp;nbsp;&lt;img src="&lt;?=base_url()?&gt;images/ajax-loader-small.gif" alt="Loading..."/&gt;',
      tabTemplate: "&lt;li class='override_tabs'&gt;&lt;a class='override_tab_anchors' href='#{href}'&gt;#{label}" + "" + "&lt;span&gt;&lt;div style='text-align:center; display:none;' class='showarrow' id='#{label}'&gt;" + "&lt;img alt='up arrow' src='&lt;?=base_url()?&gt;images/up_arrow_tab.png'&gt;    " + "&lt;/div&gt;" + "&lt;/span&gt;&lt;/a&gt;&lt;span class='override_close_icon' style='cursor: pointer;'&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;" + "&lt;/li&gt;",
      add: function(event, ui) {
          $tabs.tabs('select', '#' + ui.panel.id);
      },
      select: function(e, ui) {
          $(".showarrow").hide();
          $(".override_tab_anchors_selected").removeClass('override_tab_anchors_selected');
          return true;
      },
      load: function(e, ui) {}
  });​
  </code></pre>
  
  <p><strong>This is how I call the ajax tab</strong></p>
  
  <pre><code>$tabs.tabs("add","&lt;?=base_url()?&gt;index.php/contracts/vieweditcontract/"+contract_id+"/"+contract_id,tab_title);
  </code></pre>
  
  <p>Note: Main concern is, how to select tab after its done loading/rendering.</p>