Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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
Community showcase
Published in Apps & Integrations

Send an Email or Publish to Confluence - What should you do with your release notes?

Background When you hear the words ‘Release notes’, almost always you think of an unsolicited email from a software vendor. But I am here to tell you that from our data, sending release notes via E...

102 views 1 2
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you