Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Earn badges and make progress

You're on your way to the next level! Join the Kudos program to earn points and save your progress.

Deleted user Avatar
Deleted user

Level 1: Seed

25 / 150 points

Next: Root


1 badge earned


Participate in fun challenges

Challenges come and go, but your rewards stay with you. Do more to earn more!


Gift kudos to your peers

What goes around comes around! Share the love by gifting kudos to your peers.


Rise up in the ranks

Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!


How to call AJS.$() from a Jira Cloud plugin?



Having followed this guide on how to create a Jira plugin, I have successfully installed a plugin to my instance of Jira Cloud. After a substantial amount of boilerplate, I was able to successfully inject AP in order to be able to make JQL calls, such as AP.require(...) and even handle the response by showing the issues as expected and styling them with AUI.

However, I've hit a snag. I want to listen to the user's click event and show a dialog when that happens. According to the documentation for dialog2, it needs to be done by setting a listener with AJS like so: AJS.$("#button").click(...). The problem is that "AJS is not defined." No matter how I try to inject it, be it via a <script> tag, or simply by waiting for it to load with a setTimeout function, it is never available.

The documentation and solutions that I found talk about configuring atlassian-plugin.xml or adding resources in Java. I don't have any of that. In my case, I've simply exposed my local development instance to the public web via ngrok (as suggested in the tutorial) and have installed the plugin using the "Manage add-ons" feature of the Jira Cloud instance.

Here's how I've imported AP:

<script id="connect-loader" async data-options="sizeToParent:true;">
  (function() {
    var getUrlParam = function(param) {
      var codedParam = (new RegExp(param + '=([^&]*)')).exec([1];
      return decodeURIComponent(codedParam);
    var baseUrl = getUrlParam('xdm_e') + getUrlParam('cp');
    var options = document.getElementById('connect-loader').getAttribute('data-options');
    var script = document.createElement("script");
    script.src=baseUrl + '/atlassian-connect/all.js'; = 'all';
    if (options) {
      script.setAttribute('data-options', options);

<script type="text/javascript">
  var allScript = document.querySelector('#all');

  function init() {
    // ...

  allScript.addEventListener('load', init);

Here's how I've imported AUI:

<link href="//" media="all" rel="stylesheet" type="text/css">
<script async src="//" type="text/javascript"></script>

And this is what I'm trying to accomplish:

AJS.$('.aui-page-panel').click(function(event) {


I can provide more relevant code if necessary.

AJS.$ is undefined while the page is loading. How would I fix that?

2 answers

A month later, this is still an issue. I've been making some progress, albeit painfully slowly.

  1. According to this page, 7.9.9 is the latest stable version of AUI
  2. Though the Getting Started page only lets you download a zip of version 7.7.0, by changing the URL to this, it is possible to download version 7.9.9

There seems to be a discrepancy between AUI 7.9.9 that's hosted on the documentations page and the one that I'm supposed to self-host for the plugin. The biggest difference lies in the fact that the former contains AJS.dialog2 while the latter does not.

I've created a quick demonstration of the issue by starting an HTML project on Codepen: This project includes the JS and CSS files exactly as they appear in the zip above. If you follow the short instructions in the Codepen, you could see the discrepancies for yourself.

Again, my question is, what am I doing wrong? I'm simply trying to invoke a modal with AJS.dialog2, as documented here.

Turns out that in order to get AJS.dialog2 to be exposed correctly, referencing aui.js is not enough. aui-experimental.js and aui-soy.js also need to be referenced.

This is an odd design choice at best, especially because there is no experimental label next to Dialog 2 under "Other Components:"


While trying to go back to the basics, I found more recent versions of AUI, which is important because AJS comes with it. Here's how I added them to the head tag of the plugin's index.html page:

<link href="//" media="all" rel="stylesheet" type="text/css">
<script async src="//" type="text/javascript"></script>

However still, while the plugin is loading, AJS.$ is not available. It is available in the browser's console after the page is loaded though.

Note how I said AJS.$? That's because when I use the debugger statement at the spot where I need AJS.$, I can call AJS() but I cannot call AJS.$() because AJS.$ is undefined.

Suggest an answer

Log in or Sign up to answer