Hello,
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(window.location.search)[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';
script.id = 'all';
if (options) {
script.setAttribute('data-options', options);
}
document.getElementsByTagName("head")[0].appendChild(script);
})();
</script>
<script type="text/javascript">
var allScript = document.querySelector('#all');
function init() {
// ...
}
allScript.addEventListener('load', init);
</script>
Here's how I've imported AUI:
<link href="//cdnjs.cloudflare.com/ajax/libs/aui/7.6.0/aui/css/aui.min.css" media="all" rel="stylesheet" type="text/css">
<script async src="//cdnjs.cloudflare.com/ajax/libs/aui/7.6.0/aui/js/aui.min.js" type="text/javascript"></script>
And this is what I'm trying to accomplish:
AJS.$('.aui-page-panel').click(function(event) {
event.preventDefault();
AJS.dialog2('#dialog').show();
});I can provide more relevant code if necessary.
AJS.$ is undefined while the page is loading. How would I fix that?
