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 · Accepted solution]

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.

[Alexander Verzakov]

var $=jQuery.noConflict();
$(document).ready(function ()
{
    document.addEventListener("DOMNodeInserted", catchTabEvent, false);
});

function catchTabEvent(){
    $(".aui-tabs").on("tabSelect", function(e) {
        console.log(e);
    });
}

Thank you it worked. But fires 3 times  in one click but i will revent it by other methods. 

[Radek Dostál]

I tested it on Jira 8.13.13 with my own plugin's page, it only fired once per each tab click, with respective "event data" depending on the element (my aui select had 3 tabs in total).

The way I tried was to simply open the page and paste my .js into chrome console, so I didn't actually add it as a "full fledged" web resource.

When I was checking the page source it was pretty much identical to your example in terms of html structure (the only difference being velocity markup). So not sure why it would fire 3 times for you, our test benches should be the same - any chance your .js gets added multiple times? Pretty sure that 1 click should result in 1 event, any more than that sounds like the code is added multiple times.

[Alexander Verzakov]

Multiple firing was caused by 

DOMNodeInserted