How add javascript in dialog

[aas]

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

[Peter-Dave Sheehan · Accepted solution]

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]

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