Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

AUI tabs select event

Edited

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

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.

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. 

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.

Multiple firing was caused by 

DOMNodeInserted

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Published in Confluence Cloud

🏠 Say hello to the new Confluence Home!

Hi Atlassian Community, My name is DJ Chung, and I’m a Product Manager on the Confluence Cloud team. Today, I’m excited to share a new and improved version of Home. The new Home helps you ...

1,057 views 8 43
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you