How to dynamically render JSON to Dialog2 (aui-dialog2-content)

Bitbucket Development Bitbucket Server
, ,
1

Hi,

I’m using dialog2 (Dialog2 - AUI Documentation) and wish to render JSON response to Dialog using JS so once the button is clicked the response is shown on the dialog.

Can someone please suggest any approach to achieve this? as per docs, To get a reference to the API for a dialog2 instance, call AJS.dialog2(selector), where selector can be a selector string, DOM node, or jQuery element, but can’t find a good reference of doc to continue with

@madamczak - Sorry to bother you again, any suggestion here?

2

Hi @MansingShinde, what you can do is to query the DOM and retrieve the content element you want to update:

<section id="my-dialog" class="aui-dialog2 aui-dialog2-medium" role="dialog">
    <!-- Dialog header -->
    <header class="aui-dialog2-header">...</header>
    <!-- Main dialog content -->
    <div class="aui-dialog2-content">
        <aui-spinner size="medium"></aui-spinner>
    </div>
</section>

const dialogContent = document.querySelector('#my-dialog .aui-dialog2-content');
dialogContent.innerHTML = '<p>New HTML</p>';

AJS.dialog2('#my-dialog').show();

If you prefer you can use jQuery for that:

const dialogContent = AJS.$('#my-dialog .aui-dialog2-content');
dialogContent.html('<p>New HTML</p>');

AJS.dialog2('#my-dialog').show();

You could also set a unique id attribute on the aui-dialog2-content element e.g. my-dialog-content and then simplify the DOM query.

Thanks,
Maciej Adamczak
Atlassian Developer

1 Like
3

Apologies for the delay in response. @madamczak - this really helps const dialogContent = AJS.$(’#my-dialog .aui-dialog2-content’);

Thank you.

1 Like