title: Loading JSON-encoded AJAX content into jQuery UI tabs
body: <p>We want all of our AJAX calls in our web app to receive JSON-encoded content.  In most places this is already done (e.g. in modals) and works fine.</p>
  
  <p>However, when using jQueryUI's tabs (<a href="http://jqueryui.com/demos/tabs/" rel="noreferrer">http://jqueryui.com/demos/tabs/</a>) and their ajax functionality, only plaintext HTML can be returned (i.e. from the URLs specified in the a tags below).  How do I get the tab function to recognize that on each tab's click, it will be receiving JSON-encoded data from the specified URL, and to load in the .content index of that JSON?</p>
  
  <pre><code>$(function() {
      $('div#myTabs').tabs();     
  });
  
  &lt;div id="mytabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all"&gt;
      &lt;ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"&gt;
          &lt;li class="ui-state-default ui-corner-top"&gt;&lt;a href="/url/one"&gt;Tab one&lt;/a&gt;&lt;/li&gt;
          &lt;li class="ui-state-default ui-corner-top"&gt;&lt;a href="/url/two"&gt;Tab two&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>