It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Events in dialogs

Jakub Zadrożny Aug 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

2 votes
Answer accepted
Khanh Nguyen Atlassian Team Aug 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 Aug 21, 2016

Perfect solution, worked instantly. Thanks for help smile

0 votes
Vitalii Petrychuk Atlassian Team Aug 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 Aug 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 Aug 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 Team Aug 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

Suggest an answer

Log in or Sign up to answer
This widget could not be displayed.
This widget could not be displayed.
Community showcase

Friday Fun: What's your best vacation planning hack?

Let's face it, work can be challenging but fulfilling, especially when you enjoy the challenges thrown at you.  However for me, nothing compares to going on vacation (or holiday as some of you m...

576 views 29 4
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you