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

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

Perfect solution, worked instantly. Thanks for help smile

0 votes

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.

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.

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.

@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
Community showcase
Posted in United States

Live! - Austin ACE -- Summer BASH 2019

Hey Austin! Come join us for our 2019 Atlassian Community Summer BASH as we transition ourselves into party status! Bring an attachment, log a great time, and collaborate with new friends as we celeb...

27 views 0 0
View post

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