I have a Jira velocity page which defines an aui-dialog2 popup window element like so:
<section id="address-dialog" class="aui-dialog2 aui-dialog2-small aui-layer" role="dialog" aria-hidden="true">
<header class="aui-dialog2-header">
<h2 class="aui-dialog2-header-main">$i18n.getText("project.template.university.settings.location.create")</h2>
<a class="aui-dialog2-header-close"><span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span></a>
</header>
<div class="aui-dialog2-content">
<div class="field-group">
<label for="address-location-name">Name<span class="aui-icon icon-required">(required)</span></label>
<input class="text medium-field" type="text" id="address-location-name" name="location-name" >
</div>
<div class="field-group">
<label for="address-location-city">Ort<span class="aui-icon icon-required">(required)</span></label>
<input class="text medium-field" type="text" id="address-location-city" name="location-city" >
</div>
<div class="field-group">
<label for="address-location-zip">PLZ<span class="aui-icon icon-required">(required)</span></label>
<input class="text medium-field" type="text" id="address-location-zip" name="location-zip">
</div>
<div class="field-group">
<label for="address-location-county">Bundesland<span class="aui-icon icon-required">(required)</span></label>
<select class="select" id="address-location-county" name="location-county">
</select>
</div>
</div>
<footer class="aui-dialog2-footer">
<div class="aui-dialog2-footer-actions">
<button id="address-submit-button" class="aui-button aui-button-primary">Speichern</button>
</div>
</footer>
</section>
the dialog is properly displayed, however, its contents look like ugly non-formatted raw HTML.
I was expecting them to be rendered like all other jira controls.$webResourceManager.requireResource("com.atlassian.auiplugin:aui-dialog2") expression in the velocity template’s head section. What am I missing here?
The documentation for forms clearly dictates that you are supposed to embed fields in a <form> element. The form should have a class equal to aui.
<form class="aui" id="my-form" name="myForm">
<div class="field-group">...</div>
<div class="field-group">...</div>
<div class="buttons-container">
<div class="buttons">...</div>
</div>
</form>
1 Like
ok, I changed my template to include the aui-form like so
<div class="aui-dialog2-content">
<form class="aui" id="address-form" name="addressForm">
<div class="field-group">
....
</div>
</form>
</div>
unfortunately, nothing changed for the rendering.
tjoy
April 5, 2019, 2:04pm
4
Are you sure the changes were reflected in the app? (i.e rebuilt after the changes and you saw it in DOM?) Because I was able to reproduce this behavior with your initial code in a dialog2 in documentation, which did get fixed by wrapping it in <form class="aui">
Indeed! You are right. I cannot see the added <form class="aui"> tag in the dom. When I add it manually it works like a charm. Questions is why is not rebuild properly. I even cleaned the whole project with atlas-clean.sh as well as cleared my browser cache. But still the form tag does not appear in the generated html.
1 Like
tjoy
April 5, 2019, 3:56pm
6
I’m not sure, could be that the instance starts with old plugin jar from your local maven repository?
Depending on how you are building the plugin, you could try atlas-ci, and pi
Or if you are using quickReload plugin, maven package should be enough.
Final foolproof way would be manually installing the jar from /target using Jira add-ons page
yann
April 10, 2019, 7:54am
7
Hi, I use it also by this way
$webResourceManager.requireResource("com.atlassian.auiplugin:aui-select2")
<head>
<script>
$(document).ready(function() {
AJS.$(".js-select").select2();
// $('.js-select').select2();
});
</script>
</head>
<body>
<select class="js-select" id="selectScript" name="selectScript" style="width: 70%">
<optgroup label="Action">
#foreach($option in $scriptList.entrySet())
#if ($option.getKey().startsWith("action."))
<option #if ($selectScript && $selectScript==$option.getKey())selected="selected" #end)>$option.getKey()</option>
#end
#end
</optgroup>
<optgroup label="Condition">
#foreach($option in $scriptList.entrySet())
#if ($option.getKey().startsWith("condition."))
<option #if ($selectScript && $selectScript==$option.getKey())selected="selected" #end)>$option.getKey()</option>
#end
#end
</optgroup>
<optgroup label="Others">
#foreach($option in $scriptList.entrySet())
#if (!$option.getKey().startsWith("condition.") && !$option.getKey().startsWith("action."))
<option #if ($selectScript && $selectScript==$option.getKey())selected="selected" #end)>$option.getKey()</option>
#end
#end
</optgroup>
</select>
</body>
I found the problem. I had the section <form> element nested in the underlying velosity template HTML. By moving the <section> block out of the underlying form tag I resolved the problem.
Thank you for clarifying and letting us know where the solution was.
