Forums

Articles
Create
cancel
Showing results for 
Search instead for 
Did you mean: 

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

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



 

Suggest an answer

Log in or Sign up to answer
TAGS
atlassian, confluence administration certification, atlassian certified professional, confluence admin for cloud, atlassian learning, confluence training, confluence certification exam, confluence cloud admin, admin credential, atlassian certification

Become a certified Confluence admin today! 📖

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
AUG Leaders

Atlassian Community Events