Hi all,
I am trying to add custom issue tab panel with Ajax loading in Jira server. When custom tab is opened on the screen and the page is loaded, everything is working fine but whenever I change the tab (twice), and reopened the custom tab panel, then tab inside my panel is not working. It seems the problem is event binding for tab selection. My code is here, this is a velocity file that is triggered by custom AbstractIssueTabPanel3 and AbstractIssueAction classes.
<div class="aui-tabs horizontal-tabs" id="myCustomTab">
<ul class="tabs-menu">
<li class="menu-item">
<a href="#divTabOne">TabOne</a>
</li>
<li class="menu-item">
<a href="#divTabTwo">TabTwo</a>
</li>
</ul>
<div class="tabs-pane" id="divTabOne">
Tab One is here
</div>
<div class="tabs-pane" id="divTabTwo">
Tab Two is here
</div>
</div>
<script type="text/javascript">
// tab is loaded more than once when the it is opened, so need to load its content once
var isTabContentLoaded = false;
AJS.$(document).ready(function() {
JIRA.ViewIssueTabs.onTabReady(function() {
if(!isTabContentLoaded){
// onTabReady event is thrown for every tab, so need to run our code when it is ours
if($("#issue-tabs").find('.active a').text() == "MyCustomPanelTabName") {
TabLoader.bindEvents();
isTabContentLoaded = true;
}
}
});
} );
var TabLoader = {
bindEvents: function() {
AJS.$("#myCustomTab > ul > li > a").bind("tabSelect", function(e, o) {
var href = o.tab.attr("href");
if (href == "#divTabTwo") {
console.log('divTabTwo is opened');
} else if (href == "#divTabOne") {
console.log('divTabOne is opened');
}
});
}
}
</script>
After changing the tab and re-opened it, then tabSelect function is working first time. Then after changing the tab and reopened it again, then it does not work.
And also, I use aui-dropdown2 inside the custom tab panel, and it has same problem too. It seems there might be similar problem.
Can you please help with that problem?