title: jquery ui ajax tab using aria-control instead of url
body: <p>In jquery-ui 1.10.3 the url method had been replaced with aria-control method.</p>
  
  <p>I can't work out how to use it.</p>
  
  <p>I am trying to load data from a file called action.php</p>
  
  <p>action.php file sends the message "Contents from the server"</p>
  
  <p>I need to place it in the first of three tabs.</p>
  
  <p>It does not work. I get the following message displayed on the chrome console</p>
  
  <p>Uncaught Error: no such method 'aria-controls' for tabs widget instance </p>
  
  <p>I have the following code.</p>
  
  <pre><code>&lt;div id="tabs" 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 ui-tabs-selected ui-state-active"&gt;&lt;a href="#tab1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
              &lt;li class="ui-state-default ui-corner-top"&gt;&lt;a href="#tab2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
              &lt;li class="ui-state-default ui-corner-top"&gt;&lt;a href="#tab3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div id="tab1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"&gt;Contents of first tab.&lt;/div&gt;
          &lt;div id="tab2" class="ui-tabs-panel ui-widget-content ui-corner-bottom"&gt;Contents of the second tab&lt;/div&gt;
          &lt;div id="tab3" class="ui-tabs-panel ui-widget-content ui-corner-bottom"&gt;Contents of the third tab&lt;/div&gt; 
      &lt;/div&gt;
  
  
      &lt;script type="text/javascript"&gt;
          (function($) {
              $("#tabs").tabs()
                  .tabs("aria-controls", 0, "action.php")
                  .tabs("load", 0);
          })(jQuery);
      &lt;/script&gt;
  </code></pre>