JS dialog2 show event not firing everywhere

[Peter-Dave Sheehan]

Using Scriptrunner script fragments, I have a dialog2 being displayed from a web item in the sidebar.

I have a js web resource for binding actions to the various elements on dialog. I can confirm that the resource is loaded correctly (played around with multiple context including atl.general and atl.global).

But I can't get the AJS.dialog2.on("show") event to be detected in all contexts.

I reduced the web resource to it's strict mimimum to :

(function ($) {
   $(function () {
      AJS.dialog2.on("show", function() {
         alert("Dialog show event detected");
      });
   });
})(AJS.$);

The dialog is always displayed correctly. The show event only runs when I activate the dialog from a page with the URLs like:

• https://myjirahostname.com/plugins/servlet/project-config/JSP/summary
• https://myjirahostname.com/projects/JSP?selectedItem=com.atlassian.jira.jira-projects-plugin:report-page
• https://myjirahostname.com/projects/JSP?selectedItem=com.atlassian.jira.jira-projects-plugin%3Arelease-page&status=unreleased
• https://myjirahostname.com/secure/RapidBoard.jspa?projectKey=JSP&rapidView=349

But not from 

• https://myjirahostname.qad.com/browse/JSP-2648
• https://myjirahostname.qad.com/projects/JSP?selectedItem=com.atlassian.jira.jira-projects-plugin:components-page
• https://myjirahostname.com/projects/JSP/issues/JSP-2616?filter=allopenissues

I'm stumped, what am I doing wrong? Is this even supposed to work?

My thoughts for a workaround is add an ajaxComplete binding and check if my custom dialog is present and then do all my other bindings.
But I'd much rather use the built-in events if they're available.

Suggestions appreciated.

Peter-Dave

JIRA 7.3.3
Scriptrunner 4.3.19

[Peter-Dave Sheehan · Accepted solution]

Here is what I ended up doing since the AJS.dialo2.on("show") wasn't fireing...

I've removed the event binding and wrapped my entire JS into a function:

function bindMyCustomEvents() {
   (function ($) {
      var customDialor = AJS.dialog2("#mysCustomDialogId")
      //bind various controls on my dialog such as...
      $("#dialog-close-button").click(function (e) {
         e.preventDefault();
         customDialog.hide();
         customDialog.remove();
      });
   })(AJS.$);
}

Then in my dialog's HTLM as served by the rest end point called by the custom web item I simply included a call to that top level function to load all my custom bindings:

<section role="dialog" id="mysCustomDialogId" class="aui-layer aui-dialog2 aui-dialog2-large" aria-hidden="true"  >
 ...
</section>
<script>
bindMyCustomEvents()
</script>

That seems to work well.

[Daniel Yelamos [Adaptavist]]

Hello Peter.

We have this logged in our support desk as a known issue. We are currently working on a fix for this. If you want to see the progress and status updates on the issue, here is the link so that you can watch it:

https://productsupport.adaptavist.com/browse/SRJIRA-2107

Hope this helps!

[Jonny Carter]

Hey, Peter. Since you've confirmed that the resource is indeed being loaded (and executed?), I won't go into troubleshooting that.

The sisue Daniel linked to, SRJIRA-2107, is similar, though I'm not sure our fix will rectify your issue, since your problem lies with some custom Javascript that you've written.

I would say that your suspicions are probably correct; you most likely need to check to see if your custom web item has indeed been loaded. If it's inside a dropdown that gets loaded via AJAX, it may not even get loaded into the DOM until the user clicks on the dropdown. I'm not sure why your sidebar would be loaded in some contexts but not in others; it is actually the same dialog in the two different contexts? One thing you might try is just running the core of your code manually in your browser's console after you're certain that the dialog2 web item is there to bind to.

      AJS.dialog2.on("show", function() {
         alert("Dialog show event detected");
      });

If that event binding works, then you probably just need to add the check you described to make sure it's loaded.

[Peter-Dave Sheehan]

Hi Jonny

You are right, I don't think SRJIRA-2107 is quite what I'm looking for.

Let me provide some additional details.

Here is the web item config:

This works 100% of the time. The dialog is always displayed as exxpected when I click the web item/link. (I think if I was impacted by SRJIRA-2107 the linke would sometimes be there others not).

The web resource is similarily simple (I was following the Dialogs (advanced) example on https://scriptrunner.adaptavist.com/4.3.19/jira/fragments/WebItem.html)

Where CustomProjectOptions.js contains the code I shared in the original post. When using the example code from the adaptivist site, I can't get the close button to work in the contexts listed above.

When I change the js to: 

alert("js Web Resource loaded");
AJS.dialog2.on("show", function() {
  alert("Dialog show event detected");
});

Then I get a the first firt alert on every page load, but the second doesn't appear after calling the custom web item. 

After the dialog loads, I am able to manually call the following in the console:

AJS.dialog2('#qadprojectid-option-dialog').hide()

And it works as expected, the dialog is hidden and removed. 

I can then call  

AJS.dialog2('#qadprojectid-option-dialog').show()

to show the dialog again (I've set data-aui-remove-on-hide=false for testing). 

But still, the onShow event is not seen or executed from those specified contexts.

So I kept digging and trying to understand the  JS construct suggested -- I read about IIFE and also found out that $(function (){...}); is shorthand for $(document).ready(function() { ... }); --  and I found out that if I change:

(function ($) {
  $(function () {
    AJS.dialog2.on("show", function (e) {
      var targetId = e.target.id;
      if (targetId == "my-own-dialog") {
        var someDialog = AJS.dialog2(e.target);
        $(e.target).find("#dialog-close-button").click(function (e) {
          e.preventDefault();
          someDialog.hide();
          someDialog.remove();
        });
      }
    });
  });
})(AJS.$);

to 

(function ($) {
  $(document).ajaxComplete(function() { 
    AJS.dialog2.on("show", function (e) {
      var targetId = e.target.id;
      if (targetId == "my-own-dialog") {
        var someDialog = AJS.dialog2(e.target);
        $(e.target).find("#dialog-close-button").click(function (e) {
          e.preventDefault();
          someDialog.hide();
          someDialog.remove();
        });
      }
    });
  });
})(AJS.$);

Then the binding works all the time (thought probably gets repeated multiple times) 

Could it be that the earlier construct doesn't work in some context because AJS.dialog2 hasn't been loaded yet in those context when the $(function(){...}); executes?