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.
@Peter-Dave 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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.