AUI tabs select event

Alexander Verzakov

Hi.

I need to trigger with tab selected. But i don't understand how to bind to tabSelect event.

<div class="aui-tabs horizontal-tabs" id="master-defaulter-config-page">
    <ul class="tabs-menu">
        #set($tabIndex = 1)
#foreach($issueType in $issueTypes.entrySet())
<li class="menu-item">
                <a href="#tab-$tabIndex">$issueType.key | $issueType.value</a>
            </li>
            #set($tabIndex = $tabIndex +1)
#end
    </ul>
    #set($tabIndex = 1)
#foreach($issueType in $issueTypes.entrySet())
<div class="tabs-pane" id="tab-$tabIndex">
            <br>
            <table class="aui" >
                <tr>
                    <th style="text-align:center">test</th>

                </tr>

            </table>
        </div>
        #set($tabIndex = $tabIndex+1)
#end
</div>

Last try to catche event is 

AJS.$(document).ready
(
AJS.$('#master-defaulter-config-page').bind("tabSelect", function(event, object){
    console.log("tab selected");
})
);

jQuery select or activate methods are not works or i did it in wrong path.
Please help. 

Radek Dostál

Never really tried aui events much, but adding this .js after the page is loaded works for me:

$(".aui-tabs").on("tabSelect", function(e) {
  alert("Congratulations, you're the 100,000th visitor and win a YACHT!");
  console.log(e);
})

 

And "e" here carries some extra information you can use in the function. Chrome console tab has a good interface to dig through the event data and what you might want to dig out of it.