JIRA issue screen tab pane tab change event

nija_kanthan August 22, 2018
JIRA.ViewIssueTabs.onTabReady(function () { 
  console.log("Questions Tab JS loaded!");
});

Above event is getting called for all tabs.

Is there any way to detect (event) issue screen tab change event using JavaScript?

1 answer

1 accepted

3 votes
Answer accepted
Nir Haimov
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
August 22, 2018

Hi @nija_kanthan

I don't understand.

The code you sent is in JavaScript, 

JIRA.ViewIssueTabs.onTabReady

 Is the event, the function inside doing what ever you want when the event occur, which means you detect it, catch and do what you want there...

So i don't understand your question.

nija_kanthan August 23, 2018

Screen Shot 2018-08-23 at 11.39.23 AM.pngI have custom tab called Questions. I want an event to detect tab change. If the selected tab is Questions i want to call some JavaScript function. Above method is getting called for all tabs.

Nir Haimov
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
August 23, 2018

OK,

You still have to call 

JIRA.ViewIssueTabs.onTabReady

But inside do what you want only if you are in tab  Questions.

JIRA.ViewIssueTabs.onTabReady(function () { 
if ($("#issue-tabs").find(".active strong").text() == "Questions") {
write your code here
}
});
Like # people like this
nija_kanthan August 23, 2018

It works,

if($("#issue-tabs").find('.active a').text() == 'Questions') {
//code goes here
}

I changed the condition into this.

Thanks for the reply :) 

Nir Haimov
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
August 23, 2018

You are welcome :)

Verhás István
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.
October 23, 2019

The accepted answer is working perfectly until you need i18n in your plugin. In that case I prefer the following solution:

$("li.menu-item.active-tab")[0].getAttribute("data-key")

this will give back the "plugin key:module key". It is independent of the selected language and hopefully unique.

Raja July 16, 2020

I am facing a similar issue, the JIRA.ViewIssueTabs.onTabReady is called several on the page load. Following is my code and result, The result is duplicated. Could anyone help?

JIRA.ViewIssueTabs.onTabReady(function () {
if($("#issue-tabs").find('.active a').text() == 'Sync Status') {
getIssueTabContent();
}

jiratabpanelissue.PNG

Nir Haimov
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
July 20, 2020

Just write the event to run after the page loaded., like:

AJS.$(document).ready(function () {
JIRA.ViewIssueTabs.onTabReady(function () {
if($("#issue-tabs").find('.active a').text() == 'Sync Status') {
getIssueTabContent();
}
})
Raja July 20, 2020

Thank you @Nir Haimov 

I tried the way you suggested. No matter where you write

JIRA.ViewIssueTabs.onTabReady(function () {})

It is called several times. Is there a way to stop this from calling these many times?

AJS.$(document).ready(function () {
JIRA.ViewIssueTabs.onTabReady(function () {
if($("#issue-tabs").find('.active a').text() == 'Sync Status') {
getIssueTabContent();
}
});
})
rcelik July 24, 2020

Did you find a solution? I am in same situation as you and could not find soluion yet.

Raja July 27, 2020
istvan_verhas July 27, 2020

Hi @Raja 

Your issue not fully clear for me. Actually the onTabReady is called many times and this behaviour can not be changed from the app you develop. On the other hand the execution of getIssueTabContent() is conditional. The condition in the if statement makes sure that the getIssueTabContent() is executed only one time per activating the tab. All the other calls are skipped/neglected. 

The difference between the accepted and my answer is that I use the key of the tab (stored in the data-key attribute of the tab tag in html) instead of the title.

Please let me know if it is still not working for you.

 

Regards,

Istvan 

Suggest an answer

Log in or Sign up to answer