AUI tabs select event

Alexander Verzakov December 6, 2021

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. 

1 answer

1 accepted

2 votes
Answer accepted
Radek Dostál
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 6, 2021

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 December 6, 2021
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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 6, 2021

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 December 7, 2021

Multiple firing was caused by 

DOMNodeInserted

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events