Events in dialogs

Jakub Zadrożny August 18, 2016

In my application I'm opening a dialog via the Javascript API and then trying to communicate between both of my iframes. To achieve this, I'm using the events module of the Javascript API. In the dialog I have a 'close' button which is supposed to emit a 'close' event:

$('#dialog-close-button').click(function(e) {
    AP.require('events', function(events) {
        events.emit('close');
    });
});

In the iframe I add a listener which is supposed to handle the event and close the dialog:

AP.require('events', function(events) {
    events.on('close', function() {
        AP.require('dialog', function(dialog) {
            dialog.close();
        });
    });
});

The problem is that this code works only for the first dialog. If I open a dialog, then close it and open up a second dialog - the iframe won't receive the events emitted by the dialog.

Am i doing something wrong?

2 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

2 votes
Answer accepted
khanh
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
August 21, 2016

Calling dialog.close() outside of a dialog seems to be removing the registered events.

You should call the dialog.close() within your dialog iframe. Calling dialog.close() or closing the dialog normaling via the buttons of ESC key will by default emit the 'dialog.close' event.

So you can do something like this:

$('#dialog-close-button').click(function(e) {
    AP.require(['events', 'dialog'], function(events, dialog) {
		dialog.close();
		events.emit('custom-event');
    });
});
AP.require('events', function (events) {
	events.on('dialog.close', function() {
		alert('dialog has been closed');
	});
 
	events.on('custom-event', function() {
		alert('custom event emitted');
	});
});

 

Feel free to reach out if you need more help or if this isn't enough information. smile

I hope this helps,

Khanh

Jakub Zadrożny August 21, 2016

Perfect solution, worked instantly. Thanks for help smile

0 votes
Vitalii Petrychuk
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
August 18, 2016

This happens because you bind click event to close button just for the first dialog:

$('#dialog-close-button').click(function(e) {
    AP.require('events', function(events) {
        events.emit('close');
    });
});
And can be fixed in few ways:
  1. Attach a click event for every new dialog.
  2. Instead of attaching a click event on the close button implement events delegation:
    $(document).on('click', '#dialog-close-button', function(e) {
        AP.require('events', function(events) {
            events.emit('close');
        });
    });
  3. According to https://docs.atlassian.com/aui/latest/docs/dialog2.html you can listen to dialog events.
    If you do not care about particular dialog and just want to be notified about any close event just go with:
    AJS.dialog2.on('hide', function() {
        AP.require('events', function(events) {
            events.emit('close');
        });
    });

I would suggest using option 3.

Jakub Zadrożny August 19, 2016

I'm sorry but this doesn't fix the problem. The click is actually registered - if I add an alert in the dialog code:

$('#dialog-close-button').click(function(e) {
	alert('clicked');
    AP.require('events', function(events) {
        events.emit('close');
    });
});

it is properly shown. Even the event is emitted, because I can register it in the same dialog. I just can't register the event in the second iframe.

Vitalii Petrychuk
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
August 19, 2016

If the iframe reloads you can loose the reference to AP variable for example.
Some explanation what is AP, where you get it from, what the architecture of the plugin (I mean when iframe is created, is it persistent and so on) would be helpful.

Robert Massaioli _Atlassian_
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
August 20, 2016

@Vitalii Petrychuk AP comes from the all.js files that all Atlassian Connect add-ons must load: https://developer.atlassian.com/static/connect/docs/latest/javascript/module-AP.html

TAGS
AUG Leaders

Atlassian Community Events