JIRA issue screen tab pane tab change event

[nija_kanthan]

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?

[Nir Haimov · Accepted solution]

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]

I 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]

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
  }
});

[nija_kanthan]

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]

You are welcome :)

[Verhás István]

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]

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();
}

[Nir Haimov]

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]

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]

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

[Raja]

@nija_kanthan @Nir Haimov @Verhás István Anyone?

[istvan_verhas]

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