Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,369,943
Community Members
 
Community Events
168
Community Groups

How add javascript in dialog

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

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>



 

Suggest an answer

Log in or Sign up to answer
TAGS

Atlassian Community Events