How add javascript in dialog

aas
Contributor
December 10, 2021

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

1 answer

1 accepted

1 vote
Answer accepted
Peter-Dave Sheehan
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 10, 2021

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.

aas
Contributor
December 13, 2021

@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>



 

Suggest an answer

Log in or Sign up to answer