Same AUI.dialog2 appears 2 times in Page Source

Jira Development Jira Server
,
1

Hi!

JIra 8.5.2, ATLAS 8.0.16

I created a Jira Plugin which uses Dialog2.

When I open the Dialog, close it and change to another Issue from the left side ListView an dopen the Diaolg again the Dialog appears 2 times in the Page Source (<section id=“my-branch.-dialog”). Something also gets mixed up with the 2 dlgs, because the initialization isnt done correctly.

First Issue

branchdlg1
branchdlg11713×774 118 KB

Second Issue

branchdlg2
branchdlg21702×766 113 KB

I have already posted several questions regarding handling things within the Issue List View, also about the multiple events that are generated in this context.

Can somebody von Atlassian clarify how to handle things with the Issue List View regarding Dialog2 and Event handling

JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context, reason)

e.g. why JIRA.CONTENT_ADDED_REASON.panelRefreshed gets called multiple times when changing from one Issue to another.

Thank You in advance!

Regards,
Hans

2

Hi @computerpraxis,

How are you generating the HTML for your dialog? Is it inside a web panel’s HTML?

The view issue and issue search pages are built as an SPA. Every new issue view’s HTML is retrieved from the server, which probably includes your dialog’s HTML.

When a modal dialog is opened, the DOM element for it is typically moved to the bottom of the document. This is for two reasons: (a) to avoid the element being clipped or obscured by others on the page, and (b) to implement an accessibility pattern so the content underneath the dialog is hidden from screen readers.

As a consequence of moving the modal to the bottom of the DOM, it becomes disassociated with the view issue’s HTML. If you navigate to another issue, the dialog’s element is not cleaned up along with the rest of that issue’s HTML.

It sounds like you are expecting to have a single modal dialog that you re-use for all issues. This is a reasonable strategy, but requires a slight adjustment of when and how you construct the modal dialog.

One approach would be to construct your modal dialog once via your JavaScript. Here’s a codepen demonstrating how: https://codepen.io/chrisdarroch/pen/yLbpoYX?editors=1010

If you need to put custom HTML in to the modal dialog, and that content changes for every issue, you could use a web panel to transfer that content, but I would transfer it using a <template> element, then when the modal is opened, copy the contents of that template in to the modal before running your other init code. Here’s an extended codepen demonstrating the approach: https://codepen.io/chrisdarroch/pen/OJmzjMV?editors=1010

Hope that helps! Let me know if you have any follow-up questions.

Cheers,
Daz

3

All the sub-headings on Jira’s view issue page - e.g., The “Description”, “People”, “Attachments”, “Comments” - are all “panels”. Each panel renders independently of other panels. Jira fires one of these panelRefreshed events for every section whenever that rendering occurs. This is typically when loading the page, but some features may dynamically update the content (e.g., uploading new attachments via the attachment panel or otherwise; creating a branch in the developer panel; etc.).

If you want to affect content in a specific panel, you will need to filter the events to find a panel with the ID you were expecting.

4

Hi !

Thank You for Your comments and support!

Yes, my 3 dialogs are defined within an .vm file which gets loaded in a Webpanel.

Within my dialog I have selects and inputs which need to get initialized, before the dialog is shown.

I suppose I should move the initialization code to dlg.on(‘show’, function() {});

I will check out Your samples and see how I can incorporate them into my plugin.

Will there still be a aui-blanket created for dialogs coming from JS ?

Regarding the JIRA.CONTENT_ADDED_REASON.panelRefreshed events which are delivered multiple times I collected some log output with Jira running with atlas-debug.

“github-accessor-panel” is my panel, “my-panel-html” is a div within the panel html code

In the Single issue view

panelRefreshed event: “details-module”, my-panel-html found: 0
panelRefreshed event: “descriptionmodule”, my-panel-html found: 0
panelRefreshed event: “dnd-metadata”, my-panel-html found: 0
panelRefreshed event: “attachmentmodule”, my-panel-html found: 0
panelRefreshed event: “activitymodule”, my-panel-html found: 0
panelRefreshed event: “”, my-panel-html found: 0
panelRefreshed event: “peoplemodule”, my-panel-html found: 0
panelRefreshed event: “datesmodule”, my-panel-html found: 0
panelRefreshed event: “hipchat-viewissue-panel”, my-panel-html found: 0
panelRefreshed event: “github–accessor–panel”, my-panel-html found: 1
panelRefreshed event: “”, my-panel-html found: 1

Changing from one issue to another in the Issue List View (left side of screen)
The panelRefreshed event is delivered at least 2 times for every panel

panelRefreshed event: “stalker”, my-panel-html found: 0
panelRefreshed event: “details-module”, my-panel-html found: 0
panelRefreshed event: “descriptionmodule”, my-panel-html found: 0
panelRefreshed event: “dnd-metadata”, my-panel-html found: 0
panelRefreshed event: “attachmentmodule”, my-panel-html found: 0
panelRefreshed event: “activitymodule”, my-panel-html found: 0
panelRefreshed event: “addcomment”, my-panel-html found: 0
panelRefreshed event: “peoplemodule”, my-panel-html found: 0
panelRefreshed event: “datesmodule”, my-panel-html found: 0
panelRefreshed event: “hipchat-viewissue-panel”, my-panel-html found: 0
panelRefreshed event: “github–accessor–panel”, my-panel-html found: 1
panelRefreshed event: “stalker”, my-panel-html found: 0
panelRefreshed event: “details-module”, my-panel-html found: 0
panelRefreshed event: “descriptionmodule”, my-panel-html found: 0
panelRefreshed event: “dnd-metadata”, my-panel-html found: 0
panelRefreshed event: “attachmentmodule”, my-panel-html found: 0
panelRefreshed event: “activitymodule”, my-panel-html found: 0
panelRefreshed event: “addcomment”, my-panel-html found: 0
panelRefreshed event: “peoplemodule”, my-panel-html found: 0
panelRefreshed event: “datesmodule”, my-panel-html found: 0
panelRefreshed event: “hipchat-viewissue-panel”, my-panel-html found: 0
panelRefreshed event: “github–accessor–panel”, my-panel-html found: 1
panelRefreshed event: “”, my-panel-html found: 1

Sometimes 3 times

panelRefreshed event: “stalker”, my-panel-html found: 0
panelRefreshed event: “details-module”, my-panel-html found: 0
panelRefreshed event: “descriptionmodule”, my-panel-html found: 0
panelRefreshed event: “dnd-metadata”, my-panel-html found: 0
panelRefreshed event: “attachmentmodule”, my-panel-html found: 0
panelRefreshed event: “activitymodule”, my-panel-html found: 0
panelRefreshed event: “addcomment”, my-panel-html found: 0
panelRefreshed event: “peoplemodule”, my-panel-html found: 0
panelRefreshed event: “datesmodule”, my-panel-html found: 0
panelRefreshed event: “hipchat-viewissue-panel”, my-panel-html found: 0
panelRefreshed event: “github–accessor–panel”, my-panel-html found: 1
panelRefreshed event: “stalker”, my-panel-html found: 0
panelRefreshed event: “details-module”, my-panel-html found: 0
panelRefreshed event: “descriptionmodule”, my-panel-html found: 0
panelRefreshed event: “dnd-metadata”, my-panel-html found: 0
panelRefreshed event: “attachmentmodule”, my-panel-html found: 0
panelRefreshed event: “activitymodule”, my-panel-html found: 0
panelRefreshed event: “addcomment”, my-panel-html found: 0
panelRefreshed event: “peoplemodule”, my-panel-html found: 0
panelRefreshed event: “datesmodule”, my-panel-html found: 0
panelRefreshed event: “hipchat-viewissue-panel”, my-panel-html found: 0
panelRefreshed event: “github–accessor–panel”, my-panel-html found: 1
panelRefreshed event: “”, my-panel-html found: 1
panelRefreshed event: “details-module”, my-panel-html found: 0
panelRefreshed event: “descriptionmodule”, my-panel-html found: 0
panelRefreshed event: “dnd-metadata”, my-panel-html found: 0
panelRefreshed event: “attachmentmodule”, my-panel-html found: 0
panelRefreshed event: “activitymodule”, my-panel-html found: 0
panelRefreshed event: “addcomment”, my-panel-html found: 0
panelRefreshed event: “peoplemodule”, my-panel-html found: 0
panelRefreshed event: “datesmodule”, my-panel-html found: 0
panelRefreshed event: “hipchat-viewissue-panel”, my-panel-html found: 0
panelRefreshed event: “github–accessor–panel”, my-panel-html found: 1
panelRefreshed event: “stalker”, my-panel-html found: 0
panelRefreshed event: “”, my-panel-html found: 1

I solved this by adding an global init flag which helps ignoring the re-occuring events.

Thanx & regards,
Hans