Js function included in aui does not work in my vm file

Jira Development Jira Data Center
, ,
1

I’m going to make a sortable table by referring to the atlassian aui official document.
The jira version is 8.18.1

vm file code :

<table id="tabEmpResult" class="aui aui-table-sortable">
                    <thead style="display:block; width:900px;">
                        <tr>
                            <th style="width:70px; text-align:center;">성명</th>
                            <th style="width:150px; text-align:center;">이메일</th>
                            <th style="width:180px; text-align:center;">회사</th>
                            <th style="width:180px; text-align:center;">조직</th>
                            <th style="width:180px; text-align:center;">부서</th>
                        </tr>
                    </thead>
                .......

<script type="text/javascript">
.....
AJS.tablessortable.setTableSortable(AJS.$("#tabEmpResult"));
..........
</script>

When you build a plug-in and run it on jira, you can see the following errors in the browser’s developer tool.
Uncaught TypeError: Cannot read properties of undefined (reading ‘setTableSortable’)

help me plzzzz

2

Can you check if your web-resource depends on the com.atlassian.auiplugin:aui-table-sortable web-resource?

https://aui.atlassian.com/aui/latest/docs/sortable-table.html

2 Likes
3

Thank you for your interest.
Is there anything I need to add to the web resource? I thought it was already included inside the jira.
My web resources are as follows.

<web-resource key="approval-resources" name="approval Web Resources"> 
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <dependency>com.atlassian.auiplugin:dialog2</dependency>
    <resource type="download" name="approval.css" location="/css/approval.css"/>  
    <resource type="download" name="images/" location="/images"/>  
    <context>approval</context> 
  </web-resource>

I would appreciate it if you could let me know if there is anything I need to add

4

yes, try adding the:

<dependency>com.atlassian.auiplugin:aui-table-sortable</dependecy>
1 Like
5

The dependency was added as follows, but it still does not work.

<web-resource key="approval-resources" name="approval Web Resources"> 
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <dependency>com.atlassian.auiplugin:dialog2</dependency>
    <dependency>com.atlassian.auiplugin:aui-table-sortable</dependecy>
    <resource type="download" name="approval.css" location="/css/approval.css"/>  
    <resource type="download" name="images/" location="/images"/>  
    <context>approval</context> 
  </web-resource>

So, add the webresource dependency to pm.xml as follows.

<dependency>
    <groupId>com.atlassian.plugins</groupId>
    <artifactId>atlassian-plugins-webresource</artifactId>
    <version>5.4.2</version>
    <scope>provided</scope>
</dependency>

I added a phrase to my vm file, but it still doesn’t work.

<section id="demo-dialog" class="aui-dialog2 aui-dialog2-xlarge aui-layer" role="dialog" tabindex="-1" aria-labelledby="dialog-show-button--heading" hidden>
	$webResourceManager.requireResource("com.atlassian.auiplugin:aui-table-sortable")
    <header class="aui-dialog2-header">
.....
6

@mrzymski any idea what might be wrong here? I’m clueless.

1 Like
7

@mrzymski help me plz

8

Hi @hyojoonchoi, this looks OK and should work.
You don’t need anything else.
How do you require your approval context or approval-resources web-resource key?
I think you should try to put your JS code in the regular JS file and add it to the web-resource as
<resource type="download" ...
then, replace the inline script with the $webResourceManager.requireResourcesForContext("approval");

a side note: you should rename your context name to sth more unique as those names are global and you risk the clash with some other app :wink:

I hope it helps, let us know,
Cheers!

1 Like
9

Oh yes, always namespace your contexts to something unique when doing Jira dev, e.g.

<context>com.yourcompany.jira.pluginname.approval</context>
1 Like
10

Thank you for your answers
I added the code you answered to the html element part of the vm file

$webResourceManager.requireResourcesForContext("approval");
<form name="frmtitle">
	<input type="hidden" name="issuekey" value="$req.getParameter("issuekey")">
	<input type="hidden" name="approvalId" value="$approvalId">
	<input type="hidden" name="assignee" value="$assignee">
	<input type="hidden" name="transition" value="$transition">
</form>
 
<!-- Header -->
<div class="dialog-title">
	<h1 class="aui-dialog2-header-main">$summary</h1>
</div>

<!-- Main Contents -->
<form class="aui contents-padding">

    <div class="field-group">
....
....
...

But it still doesn’t work
So when I changed the context of web-resource to jira.general, the function worked.
I understand that custom context is recommended because of the risk of collision. Is there anything I did wrong?

Is there something wrong with writing $webResourceManager.requireResourcesForContext (“approval”)?