JIRA中显示问题时如何运行JavaScript代码

Question

I am currently developing a JIRA 7 server add-on, I am stuck and I'd be grateful for any help I can get. I am new to both JIRA and JavaScript, so forgive me if I fail to see the obvious solution :-)

My Add-On includes a web panel which needs some JavaScript to function. I intend the JavaScript to register a click handler that triggers a dialog. Currently it looks something like this:

AJS.toInit(function() {

  var buttonClickHandler = function() {
    AJS.dialog2("#myDialogId").show();
  };

  AJS.$("#myButtonId").click(buttonClickHandler);
}

The actual ids of the dialog and the button depend on the issue which is displayed. Obiously I want this code to run when my dialog2 and my button are present in the DOM, which is everytime that I navigate to an issue (not just the first time I navigate to any issue). Unfortunately I do not know how to do that. I have tried the following approaches, neither of which worked:

1. bind my JavaScript file to the atl.general context. If I do that the script runs the first time I load a page that belongs to the atl.general context, ie the dashboard, any issue, etc., but when I navigate to another issue the script does not run again.

2. bind my JavaScript file to a custom context and use that in my template. If I do that the script runs the first time that an issue is displayed which has that web panel, but not run again, when I navigate to a different issue.

I figured I could find a solution based on jira events, ie register a function as an event handler using JIRA.bind() and put my code in there. However that would require an event that is triggered whenever I want my code to run, ie whenever an issue is displayed. I tried JIRA.Events.NEW_CONTENT_ADDED, function(e, context, reason) {...}) , but the event handler was never called (I checked with console.log() statements). I have no idea which other Jira events exist which I might use to my advantage, nor can I find any documentation on it.

Answer 1

If you are building the button & the dialog2 HTML yourself, then you can control the HTML and JavaScript yourself.

Use a button which has a data-controls attribute to tell it which dialog2 to trigger:

<button class="aui-button your-button-class" data-controls="#your-dialog-uniqueId">Show dialog</button>

<!-- Render the dialog -->
<section role="dialog" id="your-dialog-uniqueId" class="aui-layer aui-dialog2 aui-dialog2-medium" aria-hidden="true">
   ...
</section>

...then you can add JavaScript which reads the ID of the dialog2 element from the data-controls attribute in the button and trigger the appropriate dialog2:

AJS.toInit(function($) {    
  $(".aui-button.your-button-class").on('click', function() {
    var dialogId = $(this).data('controls');
    AJS.dialog2(dialogId).show();
  });
});

Answer 2

Well, I could not find out how to run my script every time that an issue is displayed, but I did find a practical solution to my problem:

Instead of registering the click handler to the button direcly, I registered it to the topmost DOM-Element that I knew would not be removed as long as I don't leave the context which my script is bound to: the body tag with the id "jira". Here is how:

AJS.$("#jira").on("click", "#myButtonId", buttonClickHandler);

This will apply to any button with the id "myButtonId" inside the element with id "jira". Even if the former hasn't been inserted yet. See jQuery documentation for details.