How to use javascript in JIRA plugin?

[Jeff Morgan]

Hey guys,

as the title says I wonder how I should use JavaScript correctly in my JIRA plugin. Neither the AUI js function, nor third party libs work.

What I did so far:

• under my web-resource I added

<web-resource key="todo-resources" name="todo Web Resources">
        <dependency>com.atlassian.auiplugin:ajs</dependency>
        <dependency>com.atlassian.auiplugin:dialog2</dependency>
        <dependency>com.atlassian.auiplugin:aui-table-sortable</dependency>
        <resource type="download" name="jquery.tablesorter.min.js" location="/js/jquery.tablesorter.min.js" />
</web-resource>

• then for dialog2 I added an extra js file with the needed js.
• for the sortable table I added the code in a script tag in the *.vm file.
• at least I added $webResourceManager.requireResource("com.atlassian.todo:todo-resources");

But it seemslike somethings is missing:

Failed to run init function: TypeError: AJS.dialog2 is not a function
function ($) { 
    // Shows the dialog when the "Show dialog" button is clicked
    AJS.$("#dialog-show-button").click(function() {
        AJS.dialog2("#demo-dialog").show();
    });
    // Hides the dialog
    AJS.$("#dialog-close-button").click(function(e) {
        e.preventDefault();
        AJS.dialog2("#demo-dialog").hide();
    });
    // Show event - this is triggered when the dialog is shown
    AJS.dialog2("#demo-dialog").on("show", function() {
        console.log("demo-dialog was shown");
    });
    // Hide event - this is triggered when the dialog is hidden
    AJS.dialog2("#demo-dialog").on("hide", function() {
        console.log("demo-dialog was hidden");
    });
    // Global show event - this is triggered when any dialog is show
    AJS.dialog2.on("show", function() {
        console.log("a dialog was shown");
    });
    // Global hide event - this is triggered when any dialog is hidden
    AJS.dialog2.on("hide", function() {
        console.log("a dialog was hidden");
    });
}

Failed to run init function: TypeError: Cannot read property 'setTableSortable' of undefined
function ($) {
            AJS.tablessortable.setTableSortable(AJS.$("#contactTable"));
        }

Failed to run init function: TypeError: AJS.$(...).tablesorter is not a function
function ($) {
            AJS.$("#contactTable").tablesorter();
        }

[Jeff Morgan · Accepted solution]

I fixed it by including these scripts into the vm

<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.10.1/css/aui.min.css" media="all">
<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.10.1/css/aui-experimental.min.css" media="all">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/5.10.1/js/aui.min.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/5.10.1/js/aui-experimental.min.js"></script>

but is there no nicer/cleaner way?

[Peter Geshev]

Hi Jeff,

would you mind adding the whole the contents of the atlassian-plugin.xml file and the vm template?

[Jeff Morgan]

Hi Peter,

here they are:

<?xml version="1.0" encoding="UTF-8"?>

<atlassian-plugin key="${atlassian.plugin.key}" name="${project.name}"
    plugins-version="2">
    <plugin-info>
        <description>${project.description}</description>
        <version>${project.version}</version>
        <vendor name="${project.organization.name}" url="${project.organization.url}" />
        <param name="plugin-icon">images/pluginIcon.png</param>
        <param name="plugin-logo">images/pluginLogo.png</param>
    </plugin-info>
    <!-- add our i18n resource -->
    <resource type="i18n" name="i18n" location="todo" />

    <!-- add our web resources -->
    <web-resource key="todo-resources" name="todo Web Resources">
        <context>jira.general</context>
        <dependency>jira.webresources:jira-global</dependency>
        <dependency>com.atlassian.auiplugin:ajs</dependency>
        <dependency>com.atlassian.auiplugin:dialog2</dependency>
        <dependency>com.atlassian.auiplugin:aui-table-sortable</dependency>
        <dependency>com.atlassian.auiplugin:aui-experimental-iconfont</dependency>
        <resource type="download" name="todo.css" location="/css/todo.css" />
        <resource type="download" name="jquery.tablesorter.min.js"
            location="/js/jquery.tablesorter.min.js" />
        <resource type="download" name="jquery-latest.js" location="/js/jquery-latest.js" />
        <resource type="download" name="dialog2.js" location="/js/dialog2.js" />
        <resource type="download" name="images/" location="/images" />
    </web-resource>

    <web-section name="TODOPLSection" i18n-name-key="todopl-section.name"
        key="todopl-section" location="todopl-link" weight="1000">
        <description key="todopl-section.description">The TODOPL-section Plugin</description>
        <!-- <label key="todopl-section.label"/> -->
    </web-section>
    <web-item name="TODOPL" i18n-name-key="todopl.name" key="todopl"
        section="system.top.navigation.bar" weight="1000">
        <description key="todopl.description">The TODOPL Plugin</description>
        <label key="todopl.label" />
        <link linkId="todopl-link" />
    </web-item>
    <web-item name="Todos" i18n-name-key="todos.name" key="todos"
        section="todopl-link/todopl-section" weight="1000">
        <description key="todos.description">The Todos Plugin</description>
        <label key="todos.label"></label>
        <link linkId="todos-link">/secure/Todos.jspa</link>
    </web-item>

    <webwork1 key="todos_actions" name="Todo actions" class="java.lang.Object"
        roles-required="use">
        <description>Webwork for TODOPL section.</description>
        <actions>
            <action name="com.atlassian.todo.webwork.Todos"
                alias="Todos">
                <view name="success">/templates/todos.vm</view>
                <view name="error">/templates/todos.vm</view>
            </action>
        </actions>
    </webwork1>

    
    <ao key="ao-module">
        <description>The configuration of the Active Objects service
        </description>
        <entity>com.atlassian.todo.db.TodoEntity</entity>
    </ao>
</atlassian-plugin>

<html>

<head>
<title>Todos</title>
<meta name="decorator" content="atl.general">
$webResourceManager.requireResource("com.atlassian.todo:todo-resources");
</head>

<body class="aui-page-hybrid">


    <div class="aui-page-panel">
        <div class="aui-page-panel-inner">
            <section class="aui-page-panel-content">
                <!-- Create a trigger which will be used by the JavaScript -->
                <button id="dialog-show-button" class="aui-button">Add new
                    todo</button>

                <form id="admin" class="aui"
                    action="$requestContext.baseUrl/secure/Todos.jspa" method="POST">
                    <div class="field-group">
                        <label for="name">Name:</label> <input type="text" id="name"
                            name="name" class="text">
                    </div>
                    <div class="field-group">
                        <label for="date">E-Mail:</label> <input type="text" id="date"
                            name="date" class="text">
                    </div>
                    <div class="field-group">
                        <label for="done">Done:</label> <input type="text"
                            id="done" name="done" class="text">
                    </div>
                    <div class="field-group">
                        <label for="mobile">Mobile:</label> <input type="text" id="mobile"
                            name="mobile" class="text">
                    </div>
                    <div class="field-group">
                        <input type="submit" value="Save" class="button">
                    </div>
                </form>
            </section>
        </div>
    </div>

    <div class="aui-page-panel">
        <div class="aui-page-panel-inner">
            <section class="aui-page-panel-content">
                <table class="aui aui-table-sortable tablesorter" id="todoTable">
                    <thead>
                        <tr>
                            <th id="name">Name</th>
                            <th id="date">E-Mail</th>
                            <th id="done">Done</th>
                        </tr>
                    </thead>
                    <tbody>

                        #foreach($todo in $todoList)
                        <tr>
                            <td headers="name">$todo.name</td>
                            <td headers="date">$todo.date</td>
                            <td class="done">$todo.done</td>
                        </tr>
                        #end
                    </tbody>
                </table>
            </section>
        </div>
    </div>


    <!-- Render the dialog -->
    <section role="dialog" id="demo-dialog"
        class="aui-layer aui-dialog2 aui-dialog2-medium" aria-hidden="true">
        <!-- Dialog header -->
        <header class="aui-dialog2-header">
            <!-- The dialog's title -->
            <h2 class="aui-dialog2-header-main">Add new todo</h2>
            <!-- Close icon -->
            <a class="aui-dialog2-header-close"> <span
                class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
            </a>
        </header>
        <!-- Main dialog content -->
        <div class="aui-dialog2-content">
            <form id="admin" class="aui"
                action="$requestContext.baseUrl/secure/Todos.jspa" method="POST">
                <div class="field-group">
                    <label for="name">Name:</label> <input type="text" id="name"
                        name="name" class="text">
                </div>
                <div class="field-group">
                    <label for="date">Date:</label> <input type="text" id="date"
                        name="date" class="text">
                </div>
                <div class="field-group">
                    <label for="done">Done:</label> <input type="text"
                        id="done" name="done" class="text">
                </div>
                <div class="field-group">
                    <input type="submit" value="Save" class="button">
                </div>
            </form>
        </div>
        <!-- Dialog footer -->
        <footer class="aui-dialog2-footer">
            <!-- Actions to render on the right of the footer -->
            <div class="aui-dialog2-footer-actions">
                <button id="dialog-submit-button"
                    class="aui-button aui-button-primary">Add todo</button>
                <button id="dialog-close-button" class="aui-button">close</button>
            </div>
        </footer>
    </section>

    <script type="text/javascript">
        AJS.toInit(function($) {
            AJS.tablessortable.setTableSortable(AJS.$("#todoTable"));
            //AJS.$("#todoTable").tablesorter(); 
        });
        
    </script>
</body>

</html>

[Robert Krause]

@Jeff Morgan Have you tried removing your custom version of jquery from the web resources?

[Jeff Morgan]

To load in a custom version of jquery was an attempt to fix this problem - if it's included or not does not change anything.

[Jeff Morgan]

Is there anything else to do/include than the auiplugin dependency into atlassian-plugin.xml and the webResourceManager into the vm? I mean obviously it's not lloading correcly.

[Robert Krause]

You could check if the WebResourceManager is available in the context you use it. Maybe you need to supply from your action class. In Confluence I use #requireResource(...) instead.

[Jeff Morgan]

It is available. The code from dialog2.js gehts includes correctly, but it cannot find the dialog2 function in AJS, so either something else is missing or not loading correctly..

And #requireResource seems to be not available for jira.

[Jeff Morgan]

Of course it would be better, but I tried out what the reason could be.. without success. I used AJS.toInit which should prevent the code from being executed if its not fully loaded.

<script type="text/javascript">
        AJS.toInit(function($) {
            AJS.tablessortable.setTableSortable(AJS.$("#todoTable"));
          //  AJS.$("#todoTable").tablesorter(); 
        });
        
    </script>

AJS.toInit(function($) {    
	AJS.$("#dialog-show-button").click(function() {
        AJS.dialog2("#demo-dialog").show();
    });
    // Hides the dialog
    AJS.$("#dialog-close-button").click(function(e) {
        e.preventDefault();
        AJS.dialog2("#demo-dialog").hide();
    });
    // Show event - this is triggered when the dialog is shown
    AJS.dialog2("#demo-dialog").on("show", function() {
        console.log("demo-dialog was shown");
    });
    // Hide event - this is triggered when the dialog is hidden
    AJS.dialog2("#demo-dialog").on("hide", function() {
        console.log("demo-dialog was hidden");
    });
    // Global show event - this is triggered when any dialog is show
    AJS.dialog2.on("show", function() {
        console.log("a dialog was shown");
    });
    // Global hide event - this is triggered when any dialog is hidden
    AJS.dialog2.on("hide", function() {
        console.log("a dialog was hidden");
    });
});

[Robert Krause]

Can you add the code from the script tag?

I guess this happens because the code from the script tag is executed before the components of the web resources are initialized. It would be better to add your code to a javascript file and add it to your web resources.