jquery tabs and datepicker

Question

I want to return to the last opened tab after selecting a date with a datepicker. I try doing that by getting the selected tab. That works for static tabs, but not for ajax calls, because that tabs get a different index number. How can I best do this?

this is my code:

     <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
 <script type="text/javascript" src="js/sitewide.js"></script>
 <script type="text/javascript">
  <!--
  $(function(){

   // Tabs
   $('#tabs').tabs({

    ajaxOptions: { cache: false }
   });

   // Datepicker
   $('.datepicker').datepicker({
    onSelect: showDate
   });

  });


  function showDate(date) {
   var $tabs = $('#tabs').tabs();
   var selected = $tabs.tabs('option', 'selected'); // => 0
   location.href = "./index.php?datum="+date+"#tabs-"+selected;
  }

and in the body of the page:

<div id="tabs">
<ul>
<li><a href="#tabs-1"><span><img src="img/home-klein.png" border="0" height="15"></span></a></li>
   <li><a href="./includes/c-boten.php?datum=<?php echo $start ;?>"><span>C-boten</span></a></li>
   <li><a href="./includes/gladde-boten.php?datum=<?php echo $start ;?>"><span>Gladde boten</span></a></li>
   <li><a href="./includes/jeugd-boten.php?datum=<?php echo $start ;?>"><span>Jeugdboten</span></a></li>
   <li><a href="./includes/wherries.php?datum=<?php echo $start ;?>" id="tabs4"><span>Wherries</span></a></li>
   <li><a href="./includes/stats.php"><span>Kilometerstanden</span></a></li>
   <li><a href="#tabs-6"><span>Weer & Wind</span></a></li>
   <li><a href="./includes/schadekaarten.php"><span>Schadekaarten</span></a></li>
   <?php
   if($_SESSION["anonymous"] != "1"){
   echo "<li><a href=\"#tabs-8\"><span>Uitloggen</span></a></li>";
   }
   ?>

  </ul>

  <div id="tabs-1">
  div 1 text
  </div>

any suggestions?

Answer 1

Try handling the tabs' select event and track ui.index in a variable.

For example:

var selectedTab = 0;
$('#tabs').tabs({
    ajaxOptions: { cache: false },
    select: function(event, ui) { selectedTab = ui.index; }
});