Show dialog with button in metadata banner

I want to write an add-on, which provides a button in the page.metadata.banner and opens up a dialog to fill in information. After submitting this information, I want to persist the data in the database.

Currently I got the following template (SOY):

<section id="page-status-dialog" class="aui-dialog2 aui-dialog2-large" role="dialog">
    <header class="aui-dialog2-header">

        <h2 class="aui-dialog2-header-main">Seitenstatus setzen</h2>

        <a class="aui-dialog2-header-close">
            <span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Schließen</span>
   <div class="aui-dialog2-content">
		<aui-label for="sync-product-single-select">Bitte Seitenstatus wählen:</aui-label>
	            placeholder="Seitenstatus wählen">
	            <aui-option>Falscher Inhalt</aui-option>
	            <aui-option>Veralteter Inhalt</aui-option>
	            <aui-option>Unvollständiger Inhalt</aui-option>
	            <aui-option>Falscher Ablageort</aui-option>

    <footer class="aui-dialog2-footer">
        <div class="aui-dialog2-footer-actions">
            <button id="dialog-submit-button" class="aui-button aui-button-primary">OK</button>
            <button class="aui-button aui-button-link">Schließen</button>

        <div class="aui-dialog2-footer-hint">Nach OK wird eine Mail mit dem Seitenstatus an betroffene Personen versandt.</div>

The following JS code was implemented so far.


And there is my problem: If I click onto the button ‚Äúpage-status‚ÄĚ, which is defined as follows:

    <web-item key="page-status" name="Page Status" section="page.metadata.banner" weight="80">
        <label key="page.status.label"/>
        <tooltip key="page.status.label"/>
        <link linkId="page-status" absolute="true"/>
        <styleClass>aui-button aui-button-subtle</styleClass>

I get the following error message in the console:

Uncaught TypeError: Cannot read property 'hasAttribute' of undefined

Why do I get this error message? And how can I send the information provided INSIDE the dialog to the REST interface, which I already created?

Thank you in advance.

You need to expose the soy template to the page in the atlassian-plugin.xml

 <web-resource key="" name="" >
        <dependency >confluence.web.resources:ajs</dependency >
        <context >page</context >
        <resource type="download" name="dialog.js" location="<path>/" />
        <transformation extension="soy" >
            <transformer key="soyTransformer" />
        </transformation >
    </web-resource >

And then on the page you have to actually insert the template into the DOM.


Only after that could your selector in ‚ÄėAJS.dialog2("#page-status-dialog").show();‚Äô actually find something.

You can then send the data to the server using AJS.$.ajax

                'type': 'POST',
                'url': url, ...