Trouble with Tabs

Trouble with Tabs

Hi everyone,

I am using jQuery UI Tabs and have a couple questions.  Jump to the last sentence for a recap of my questions.

The tabs are dynamically added after the rest of the page loads:
  1.  function add_monitors(){
  2.   $.post("skins/new/includes/getMonitors.php", function(data){
  3.    var monitors = data.split(","); // Put monitors into array
  4.    monitors.pop(); // Pop off last monitor (it is blank)
  5.    var x = monitors.length; // Number of monitors
  6.    for (var i=0;i<x;i++){ // For each monitor
  7.     var monitor = monitors[i];
  8.     $tabs.tabs('add', "skins/new/includes/getEvents.php?MonitorName="+monitor, monitor); // Add a tab
  9.    }
  10.   });
  11.  };
The above code works fine, but I am experiencing a few weird things.  Lets say that x = 8 (line 5).  The tabs will be added as ui-tabs-2, ui-tabs-4, ui-tabs-6, ui-tabs-8, ui-tabs-10, ui-tabs-12, ui-tabs-14, ui-tabs-16, instead of ui-tabs-1..8.

  1. <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
  2. <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#ui-tabs-2"><span>Back</span></a></li>
  3. <li class="ui-state-default ui-corner-top"><a href="#ui-tabs-4"><span>Cash_Drawer</span></a></li>
  4. <li class="ui-state-default ui-corner-top"><a href="#ui-tabs-6"><span>Front_Entrance</span></a></li>
  5. <li class="ui-state-default ui-corner-top"><a href="#ui-tabs-8"><span>New</span></a></li>
  6. <li class="ui-state-default ui-corner-top"><a href="#ui-tabs-10"><span>Station_1</span></a></li>
  7. <li class="ui-state-default ui-corner-top"><a href="#ui-tabs-12"><span>Station_2</span></a></li>
  8. <li class="ui-state-default ui-corner-top"><a href="#ui-tabs-14"><span>Station_3</span></a></li>
  9. <li class="ui-state-default ui-corner-top"><a href="#ui-tabs-16"><span>Test_Station</span></a></li>
  10. </ul>
Another weird issue is that, after the tabs are created and all of their <div>s are made, some extra ones are made, too:
  1. <div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  2. <div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
  3. <div style="float: left; padding: 4px 0pt; width: 175px; height: 190px;" class="thumb">
      <img alt="1606918 Thumbnail" src="images/1606918-001-capture-23.jpg">
      <p>Date: 2010-08-20</p>
      <p>Time: 15:11:53</p>
      <p>Event: 1606918</p>
      <p>Duration: 24.02</p>
     </div>





  4.  <div style="float: left; padding: 4px 0pt; width: 175px; height: 190px;" class="thumb">
      <img alt="1606905 Thumbnail" src="images/1606905-001-capture-23.jpg">
      <p>Date: 2010-08-20</p>
      <p>Time: 15:08:27</p>
      <p>Event: 1606905</p>
      <p>Duration: 15.91</p>
     </div>





  5.  <div style="float: left; padding: 4px 0pt; width: 175px; height: 190px;" class="thumb">
      <img alt="1607466 Thumbnail" src="images/1607466-001-capture-23.jpg">
      <p>Date: 2010-08-20</p>
      <p>Time: 17:28:03</p>
      <p>Event: 1607466</p>
      <p>Duration: 78.22</p>
     </div>





  6.  <div style="float: left; padding: 4px 0pt; width: 175px; height: 190px;" class="thumb">
      <img alt="1607472 Thumbnail" src="images/1607472-001-capture-23.jpg">
      <p>Date: 2010-08-20</p>
      <p>Time: 17:29:43</p>
      <p>Event: 1607472</p>
      <p>Duration: 28.86</p>
     </div>





  7. <div class="clearfix"></div>
  8. </div>
  9.  <div id="ui-tabs-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
  10. <div id="ui-tabs-6" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
  11. <div id="ui-tabs-8" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
  12. <div id="ui-tabs-10" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
  13. <div id="ui-tabs-12" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
  14. <div id="ui-tabs-14" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
  15. <div id="ui-tabs-16" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
  16. <div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
  17. <div id="ui-tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
  18. </div><div id="ui-tabs-5" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
  19. </div><div id="ui-tabs-7" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
  20. </div><div id="ui-tabs-9" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
  21. </div><div id="ui-tabs-11" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
  22. </div><div id="ui-tabs-13" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
  23. </div><div id="ui-tabs-15" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
  24. </div>
  25. </div>
The odd-numbered <div>s do not seem to correspond to any tabs, nor do they ever contain any other data / HTML inside them.

So, is it possible to specify a tab's anchor title when it is being added, what would cause my tabs to be created with the wrong IDs (2,4,6... instead of 1,2,3...), and what is causing the extra <div>s to be created?