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

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

Avatar

1 badge earned

Collect

Participate in fun challenges

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

Challenges
Coins

Gift kudos to your peers

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

Recognition
Ribbon

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!

Leaderboard

JS dialog2 show event not firing everywhere

Peter-Dave Sheehan
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
Apr 10, 2017

 

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:

 

But not from 

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

3 answers

1 accepted

Suggest an answer

Log in or Sign up to answer
1 vote
Answer accepted
Peter-Dave Sheehan
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
Apr 12, 2017

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.

1 vote
Daniel Yelamos [Adaptavist]
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Apr 11, 2017

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!

0 votes
Jonny Carter
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Apr 11, 2017

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
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
Apr 11, 2017

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:

webitem.jpg

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)

webresourcee.jpg

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?

TAGS
AUG Leaders

Atlassian Community Events