[jQuery]Tabs aan/uitzetten werkt niet altijd

[mithras]

Ik gebruik jQuery en jQuery-ui om tabs te maken. Deze tabs stellen alle mogelijke talen voor in mijn cms. De talen die op dat moment direct te gebruiken zijn, daarvan zijn de tabs ook aangezet. Voorbeeldje:
Er zijn in het systeem drie talen beschikbaar. Een artikel heeft twee talen. Het artikel wijzigen kent dus drie tabs (voor elke taal een), waarvan er twee aan staan (klikbaar) en eentje niet (niet klikbaar). Via een methode kan je talen toevoegen (tabs aanzetten) of verwijderen (tabs uitzetten).

Nu zit ik met het volgende probleem:

HTML:

<div id="blog-tabs">
  <ul>
    <li>
      <a href="#tab-nl" class="tab-link">Nederlands</a>
      <img src="/media/blog/delete.png" class="tab-switch" id="0">
    </li>
    <li>
      <a href="#tab-en" class="tab-link">English</a>
      <img src="/media/blog/delete.png" class="tab-switch" id="1">
    </li>
  </ul>

  <div id="tab-nl" class="blog-tab">
  <!-- Hier het nederlandse deel -->
  </div>

  <div id="tab-en" class="blog-tab">
  <!-- Hier het engelse deel -->
  </div>
</div>

Ik activeer dit geheel met de volgende javascript:

JavaScript:

$(document).ready( function(){
  $("#blog-tabs").tabs({
    disabled: [],
    selected: 0 });

   //Add click event to enable / disable tab
  $( '.tab-switch' ).click( function(){
    var tabs = $( '#blog-tabs' );
    var index = $(this).attr('id');
    var disabled = tabs.tabs( 'option', 'disabled' );
    var status = true;
    for( tab in disabled ){
      if( disabled[tab] == index ){
        status = false;
        break;
      }
    }

    if( status == false) $( '#blog-tabs' ).tabs( 'enable', index );
    else $( '#blog-tabs' ).tabs( 'disable', index );
  });
  
  $( '#blog-tabs' ).bind( 'tabsenable', function( event, ui ){
    $(this).tabs( 'select', ui.index );
    alert( 'Geklikt & aangezet!' );
  });

  $( '#blog-tabs' ).bind( 'tabsdisable', function( event, ui ){
    alert( 'Geklinkt & uitgezet!' );
  });

});

Dit werkt prima. Het probleem ligt in het in eerste instantie disablen van bepaalde tabs. Als alles aan staat, werkt het gewoon. Maar ik wil de gebruiker laten bepalen welke talen er zijn. Daarom het systeem van tabs aan- en uitzetten.

Wanneer de disabled array op regel #3 van de js file gevuld is met een aantal indices, lukt het niet meer om deze aan te zetten. Dit hoort gewoon wel te werken volgens mij (de documentatie zegt niets over tabs aanzetten die bij initialisatie uit staan).
Ook heb ik een topic in de jquery-ui gegooid, maar daar reageert men niet op mijn vraag

Heeft iemand een idee hoe ik dit kan oplossen (desnoods met een workaround)? Ik probeer vanalles, maar mijn js kennis laat me nu echt in de steek.

[Pkunk]

Wat doet dat script nou uiteindelijk behalve een alertje geven?

[mithras]

De alert geven is puur ter indicatie. Er gebeuren uiteindelijk ook nog wel andere dingen: Het aan- of uitzetten van tabs gebeurt door een onclick op het plaatje. Na het klikken op het plaatje moet het plaatje veranderen (dat een plus-teken een min-teken wordt of andersom, bijvoorbeeld).

Ook moet, wanneer een tab aangezet is, deze meteen worden geselecteerd (regel #24). Wanneer je een tab uitzet, moet er een andere tab worden geselecteerd wanneer de uitgezette tab ook de geselecteerde tab is. Etc etc etc. Er zitten nogal wat andere usability dingetjes bij die nav zo'n event moeten gebeuren.

Maar het punt is dat het al daarvoor fout gaat. Bij tabs die disabled zijn en ik wil enabled, wordt uberhaupt het tabsenable of tabsdisable event niet getriggerd. Met die alert valt dat te controleren. Ik zou graag willen dat ik wél een alert krijg te zien zodat ik weet dat het event is gebeurt.

[Pkunk]

Ik ben niet zo bekend met jQuery, maar wat doet dit regeltje?

JavaScript:

 tabs.tabs( 'option', 'disabled' );

Je gebruikt het eerst om een waarde toe te kennen aan een variabele (r.10) en later lijkt je het te gebruiken om iets te doen (r. 19,20 etc..)?

[mithras]

Op regel #3 kan ik een array zetten die in eerste instantie de tabs disabled. In dit geval zijn alle tabs enabled (hij is leeg).
Op regel #10 haal ik die array weer op (het is een getter). Die array doorloop ik en ik kijk of de index van een tab gelijk is aan een item van de array. Als dat zo is, dan is de tab namelijk disabled. Als hij niet in de array voorkomt, is hij enabled. Deze waarde (status) is om te bepalen of de onclick de tab aan of uit moet zetten.