Using scriptrunner I've made web item, which run code and display a dialog.
def dialog =
"""
<section role="dialog" id="sr-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" aria-hidden="true" data-aui-remove-on-hide="true">
<form class="aui" action="${baseUrl}/rest/scriptrunner/latest/custom/doSmth">
<header class="aui-dialog2-header">
<h3 class="aui-dialog2-header-main">xxx</h3>
<a id="cross" 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>
<footer class="aui-dialog2-footer">
<div class="aui-dialog2-footer-actions">
<div class="buttons">
<input class="button submit" type="submit" value="OK" id="create-issue-button">
<button id="dialog-close-button" class="aui-button aui-button-link">Close</button>
</div>
</div>
<div class="aui-dialog2-footer-hint">yyy</div>
</footer>
</form>
</section>
"""
Response.ok().type(MediaType.TEXT_HTML).entity(dialog.toString()).build()
But when I push cross icon dialog doesn't close.
I've tried to add
<script>
// Hides the dialog
AJS.\$("#cross").on('click', function (e) {
e.preventDefault();
AJS.dialog2("#sr-dialog").hide();
});
</script>
before <section> tag, but when I push my web item, nothing happened
Here is the Javascript I use to bind buttons in scriptrunner dialog:
(function ($) {
$(function () {
var dialog = AJS.dialog2("#sr-dialog");
dialog.on("show", function (e) {
$(e.target).find("#sr-dialog-submit").click(function (e) {
e.preventDefault();
doSubmit();
});
$(e.target).find("#sr-dialog-close").click(function (e) {
e.preventDefault();
dialog.hide();
dialog.remove();
});
});
function doSubmit(){
/* do stuff here */
}
});
})(AJS.$);
Also, I've come to embrace the groovy markup builder to build dialogs. Your dialog code would look like this:
def writer = new StringWriter()
def dialog = new MarkupBuilder(writer)
dialog.section(role: 'dialog', id: 'sr-dialog', class: 'aui-layer aui-dialog2 aui-dialog2-medium', 'aria-hidden': true, 'data-aui-remove-on-hide': true) {
form(class:'aui', action:"$baseUrl/rest/scriptrunner/latest/custom/doSmth"){
header(class: 'aui-dialog2-header') {
h3(class: 'aui-dialog2-header-main') {
dialog.mkp.yield("xxxx")
}
a(it:'cross', class:'aui-dialog2-header-close'){
span(class:'aui-icon aui-icon-small aui-inconfont-close-dialog'){
dialog.mkp.yield 'Close'
}
}
}
div(class:'aui-dialog2-content'){
//content code here
}
footer(class:'aui-dialog2-footer'){
div(class:'aui-dialog2-footer-actions'){
div(class:'buttons'){
input(class:'button submit', type:'submit', value:'OK', id:'create-issue-button')
button(class:'aui-button aui-button-link', id:'dialog-close-button'){
dialog.mkp.yield('Close')
}
}
}
div(class:'aui-dialog2-footer-hint'){dialog.mkp.yield 'yyy'}
}
}
script(type: 'text/javascript') {
def scriptFile = new File("$jiraHome/scripts/path/to/your/javascript/configDialog.js")
dialog.mkp.yieldUnescaped(scriptFile.getText('UTF-8'))
}
}
Response.ok().type(MediaType.TEXT_HTML).entity(writer.toString()).build()
Also, notice I keep the javascript in a separate file. This way I can use a code editor that gives me good javascript IDE features.
@PD Sheehan thanks for answer. It works!
But it's more convenient for me to write html markup as just a string variable, not using markup builder. So a I've just add <script> tag after <form>
def dialog =
"""
<section role="dialog" id="sr-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" aria-hidden="true" data-aui-remove-on-hide="true">
<form class="aui" action="${baseUrl}/rest/scriptrunner/latest/custom/doSmth">
...
</form>
<script >
AJS.\$("#cross").on('click', function (e) {
e.preventDefault();
AJS.dialog2("#sr-dialog").hide();
});
</script>
</section>
Also possible solution is use button without js script
<button class="aui-close-button" type="button" aria-label="close"></button>
instead
<a id="crosss" class="aui-dialog2-header-close">
<span id="cross" class="aui-icon aui-icon-small aui-iconfont-cross- circle">Close</span>
</a>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Stand out as a skilled Confluence Cloud administrator. The Confluence Administration for Cloud certification proves you can configure permissions, manage site and space settings, and monitor activity—ensuring secure, effective collaboration for your team.
Start here
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.