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?
Community moderators have prevented the ability to post new answers.
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.
I hope this helps,
Khanh
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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'
);
});
});
$(document).on(
'click', '#dialog-close-button'
, function(e) {
AP.require(
'events'
, function(events) {
events.emit(
'close'
);
});
});
AJS.dialog2.on('hide', function() {
AP.require('events', function(events) {
events.emit('close');
});
});
I would suggest using option 3.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
@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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.