AUI tabs not working when loading issue from Issue Navigator

Jira Development Jira Server
, ,
#1

Jira server version: 7.12.3
Compatible AUI version: 7.9.9

Hey, I have been developing a Jira server plugin and since the information that I need to show has started to grow a lot I decided to use the AUI tabs and came across this problem.

To test the tabs i used the example in the docs:

<div class="mod-content">
        <div class="aui-tabs horizontal-tabs">
            <ul class="tabs-menu">
                <li class="menu-item active-tab">
                    <a id="first-panel" href="#tabs-example-first">Tab 1</a>
                </li>
                <li class="menu-item">
                    <a id="second-panel" href="#tabs-example-second">Tab 2</a>
                </li>
            </ul>
            <div class="tabs-pane active-pane" id="tabs-example-first">
                <h2>This is tab 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="tabs-pane" id="tabs-example-second">
                <h2>This is tab 2</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>

When opening the issue page (jira/browse/CD-38) everything works perfectly.

But when I try to open the same issue from the project queues view (jira/projects/CD/queues/custom/1/CD-38) the tab doesn’t allow me to change to another tab and changes the URL to url#[tab-id].

I think the problem here is the href that I’m referring to the tab. In the project queues view the issue is probably being loaded in a different way.
I have searched a lot before making this post and found nothing alike.

Thank you in advance.

Best regards,

António Melo

#2

Hi @antonio.melo,

Is your plugin adding a dependency on the aui-tabs web-resource? If not, the javascript code for making the tabs work is likely not being loaded on the page, and you will need to add a dependency on the com.atlassian.auiplugin:tabs web-resource to make the tabs work.

If you’re using velocity for your templates, you should be able to add the following to it:

<!-- your markup and other things -->
#requireResource("com.atlassian.auiplugin:tabs")

If you’ve got other javascript and CSS for your application already and are creating your own web-resources, you can add the tabs code as a dependency of your code:

<web-resource key="my-feature">
  <dependency>com.atlassian.auiplugin:tabs</dependency>
  <resource type="download" name="my-feature.js" location="path/to/my-feature.js" />
</web-resource>

For more details on what these code fragments are doing, you can refer to the docs for web-resources: https://developer.atlassian.com/server/framework/atlassian-sdk/web-resource-plugin-module/

Hope that helps!
Daz.

1 Like
#3

Hey @daz,

Thank you for your quick answer!

Yes, I’m using velocity templates.
I had already created a web-resource like this:

<web-resource key="customer-insight-app-plugin-resources" name="customer-insight-app-plugin Web Resources">
    <dependency>com.atlassian.auiplugin:tabs</dependency>
    <resource type="download" name="customer-insight-app-plugin.css" location="/css/customer-insight-app-plugin.css"/>
    <resource type="download" name="customer-insight-app-plugin.js" location="/js/customer-insight-app-plugin.js"/>
    <context>jira.view.issue</context>
  </web-resource>

If I remove the context the js stops working, so I know it’s loading the files.

The #requireResource("com.atlassian.auiplugin:tabs") doesn’t work for me, so I’m using:

$webResourceManager.requireResourcesForContext("com.atlassian.auiplugin:tabs")

But still no luck.

#4

There are potentially two things that are not happening:

  1. Your code is not getting loaded on to the agent view where you expect it to load, or
  2. The code is loaded, but not initialised.

If you have a web-resource already, can you confirm that your own JavaScript and CSS code is being loaded on to the page? You could either use the browser’s developer tools to search for your source, or add something obvious like a window.alert() call to your own JavaScript.

If you can confirm that the code is loaded, it means that the AUI tabs behaviour is not being initialised when your template is rendered. This probably means you have not added AJS.tabs.setup() somewhere in your code. If that is the case, call that function somewhere either in your web-resource’s JavaScript, or in a <script> tag in your velocity template after the tabs markup.

AUI’s documentation makes mention of needing to call this setup function. It is not intuitive, but it is done in order to add appropriate WAI-ARIA attributes and behaviours to each tab group, so the markup pattern is more accessible when running.

1 Like
#5

Ok after some deeper research I found out that someone already had a similar issue.
Parts of javascript not working in issue navigator

Adding this made the trick:

JIRA.bind(JIRA.Events.ISSUE_REFRESHED, function() {
// your code
 });

Thank you @daz , you helped a lot!