Trouble disabling jQuery UI tab

Question

The API says you can't disable the active tab which I think is the crux of my problem.

I have six tabs in one UI Tab. One of the tabs is sometimes empty after an ajax call to fill all the tabs with data based on a user's click of a new UI Accordion selection. I use the "zero" tab as the default selected tab whenever the user makes a new selection.

I use the following to code in the php file that loads the sometimes empty tab to disable the tab when it's empty. It works fine unless the user has this tab selected when clicking a new UI Accordion selection. In only that case, the empty tab will remain enabled.

?>
    <script type="text/javascript">
      $(document).ready(function() {
          $( "#tabs" ).tabs( "option", "disabled", false);
      });
    </script>
<?php
}else{ 
?>
    <script type="text/javascript">
      $(document).ready(function() {
          $( "#tabs" ).tabs( "option", "disabled", [2]);
      });
    </script>

Can someone suggest a stragegy?

Here is the script containing the ajax calls:

<script type="text/javascript">                
    $('.stallion').live('click', function(){
 var id = parseInt(this.id);  // Get stallion_ID from clicked "a" tag id.
 activestallion(id);  // Function to indicate clicked Stallion in Stallion Accordion
        // Start loading Overview Tab
        var request = $.ajax({
            url: "stalliondetails.php",
            type: "GET",
            data: {stallion_ID : id}
        });
        request.done( function(html){
            $("#tabs-1").html(html);
            $( "#tabs" ).tabs( "option", "selected", 0 );
            $(".activehorse").fadeOut('1000', function(){
            document.getElementById("activehorsename").innerHTML
                 =document.getElementById(id).innerHTML;
            $(".activehorse").fadeIn('1000');
            });
            $("#tabs").tabs( "select" , 0 );
        });
        // Overview Tab load finished.
        //Pedigree Tab load starting.
        var request = $.ajax({
        url: "pedigreedetails.php",
        type: "GET",
        data: {stallion_ID : id},
        success: function(html){
        $("#tabs-2").html(html);
        }
        });    
        //Pedigree Tab load finished.
        //Progeny Tab load starting.
        var request = $.ajax({
        url: "progenydetails.php",
        type: "GET",
        data: {stallion_ID : id},
        success: function(html){
        $("#tabs-3").html(html);
        }
        });    
        //Progeny Tab load finished.
        //News Tab load starting.
        var request = $.ajax({
        url: "newsdetails.php",
        type: "GET",
        data: {stallion_ID : id},
        success: function(html){
        $("#tabs-4").html(html);
        }
        });    
        //News Tab load finished.
        //Race Record Tab load starting.
        var request = $.ajax({
        url: "racerecorddetails.php",
        type: "GET",
        data: {stallion_ID : id},
        success: function(html){
        $("#tabs-5").html(html);
        }
        });    
        //Race Record Tab load finished.
        //Analysis Tab load starting.
        var request = $.ajax({
        url: "analysisdetails.php",
        type: "GET",
        data: {stallion_ID : id},
        success: function(html){
        $("#tabs-6").html(html);
        }
        });    
        //Analysis Tab load finished.
        //Update the Seasons Request form to this Stallion.
        updateseasons(id);
        $( "#tabs" ).tabs( "option", "selected", 0 );
        $("button").button() ;       
  });
</script>

Thanks for any help.

Answer 1

To help others following this thread I wanted to post what ended up fixing this problem.

I was using

$("#tabs").tabs("option", "disabled", [2]);

When I switched to

$("#tabs").tabs("disable", 2);

The problem was corrected.

Thanks for your help Bart and William.

Answer 2

Try

<script type="text/javascript">
  $(document).ready(function() {
      $( "#tabs" ).tabs( "option", "disabled", 2);
  });
</script>

or multi-disable

 <script type="text/javascript">
  $(document).ready(function() {
      $( "#tabs" ).tabs('option','disabled', [1, 2, 3, 4]);
  });
</script>

instead of

<script type="text/javascript">
  $(document).ready(function() {
      $( "#tabs" ).tabs( "option", "disabled", [2]);
  });
</script>

to enable tab and move to use

  $( "#tabs" ).tabs( "enable" , 1 )
  $( "#tabs" ).tabs( "select" , 1 )

*counting starts from 0