title: JQuery UI Tabs - Load AJAX Tab content
body: <p>All,</p>
  
  <p>I am using JQuery UI Nested tabs. Consider the structure like this: There are 2 Main tabs: Animals, Birds. Under Animals, there are two tabs "Cats", "Dogs". Both the tabs "Cats" and "Dogs" should be loaded via AJAX when selected.. So, the code for them is something like this:</p>
  
  <pre><code>&lt;div id="fragment-1"&gt;
      &lt;ul&gt;
         &lt;li&gt;&lt;a href="/public/catstab" title="Cats"&gt;&lt;span&gt;Cats&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="/public/dogstab" title="Dogs"&gt;&lt;span&gt;Dogs&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;  
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function()
  {
      $("#tabs-loading-message").show();
      $('#fragment-1').tabs({cache:false, spinner:''});
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The issue is, I want to maintain a common div to load the AJAX urls. Ex: When you click on Cats or Dogs, the content for those tabs, should go into <code>"&lt;div id='commonDiv'&gt;&lt;/div&gt;</code> instead of going into <code>"cats"</code> div and <code>"dogs"</code> div.
  The loading should be reusable, in the sense, if call <code>reload("Dogs")</code> from anywhere inside <code>"dogs"</code> tab, it should reload the <code>"dogs"</code> tab content.</p>
  
  <p>How can I achieve this?</p>