title: Jquery ui tab hidden div appearing on main tab
body: <p>I'm not sure exactly how to describe/ask this so I'll give it my best shot.  I am using add tab functionality in jquery's tabs.  On the first tab I have a jqgrid which I use to select items to open in a new tab.  When an item is selected the new tab is created successfully, but a div is added below the jqgrid which looks something like the following (white space added).  What might I be doing wrong to cause this phantom div to show up?  I found this using firebug, but since I haven't switched tabs yet nothing should be showing up right?  Also, it appears that 2 divs are created for each addtab I do.  Is 2 normal?<br>
  EDIT: 2 is not normal, the example code does not create two on the jquery ui website.</p>
  
  <pre><code>&lt;div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Thanks.</p>
  
  <p>Code used for addtab.</p>
  
  <pre><code>function addTab() {
      var selected_row = $grid.jqGrid('getGridParam',('selrow'));
      $tabs.tabs('add', selected_row, selected_row);
  }
  </code></pre>
  
  <p>And the tab template.</p>
  
  <pre><code>tabTemplate: "&lt;li&gt;&lt;a href='#{href}'&gt;#{label}&lt;/a&gt;&lt;span class='ui-icon ui-icon-close'&gt;Remove Tab&lt;/span&gt;&lt;/li&gt;",
  </code></pre>
  
  <p>Edit: Basically adding a tab is creating two divs.  IDs that are odd are actually wanted, and even ids are not.  (id a div with id="ui-tabs-3" is correct, but another tab is added as well which is of id="ui-tabs-2".  The 2 is not wanted.)  Nowhere am I telling it to add two tabs, and the even numbered stuff is dumby and has nothing, but I believe it is causing the crazy white space to appear and grow every time I add a new tab.  Any ideas?  I'm not doing anything complicated and can't pull code apart any further I don't think without taking away the add functionality itself.</p>
  
  <p>Thanks.</p>
  
  <p>Edit: And the tab init stuff as well?  Am I missing something obvious?  Seems like 6 lines of code involved and one would think I would see what I screwed up?</p>
  
  <pre><code>var $tabs = jQuery("#tabs").tabs({
                      //tabTemplate: "&lt;li&gt;&lt;a href='http://localhost:8000/tickets/byId/#{href}/'&gt;#{label}&lt;/a&gt; &lt;span class='ui-icon ui-icon-close'&gt;Remove Tab&lt;/span&gt;&lt;/li&gt;",
                  tabTemplate: "&lt;li&gt;&lt;a href='#{href}'&gt;#{label}&lt;/a&gt;&lt;span class='ui-icon ui-icon-close'&gt;Remove Tab&lt;/span&gt;&lt;/li&gt;",
                  ajaxOptions: {
                      error: function(xhr, status, index, anchor) {
                          jQuery(anchor.hash).html("If you're reading this then something didn't go right....oops.");
                      }
                  }
              }).bind("tabsselect",function(event,ui){
                  if (ui.index == 0) {
                      $grid.trigger('reloadGrid');
                  }
              });
  </code></pre>