Scriptrunner dialog submission through javascript

[Bruce Reed]

I'm having a problem submitting a form through a scriptrunner custom dialog. A web item is used to open the dialog, where input is collected and the form data is posted to a rest endpoint. Looking at Adaptavist's suggestions and the suggestions here, it sounded like I need to use javascript to post the data from the dialog, so I created a web resource bound to atl.general that looks as follows (with console debug and alert calls):

(function ($) {
   $(function () {
     AJS.dialog2.on("show", function (e) {
     var targetId = e.target.id;
     console.log("In Dialog show, target id: " + targetId);
     if (targetId === "sr-dialog") {
       console.log("In if statement");
       var someDialog = AJS.dialog2(e.target);
       $(e.target).find("#submit-button").click(function (button) {
       $.ajax({
         type: "POST",
         url: AJS.contextPath() + "/rest/scriptrunner/latest/custom/copytojira",
         data: AJS.$(window.opener.document).find("#my-custom-sr-dialog-form").serialize(),
         beforeSend: function (request) {
           console.log("Ready for POST, before send");
           request.setRequestHeader("X-Atlassian-token", "no-check");
         },
         success: function(result) { //we got the response
           console.log("POST sent");
           alert('Successfully called');
           return false;
         },
         error: function(jqxhr, status, exception) {
           alert('Exception:', exception);
         }
       }).done(function(response) {
        //do whatever needs done in the UI here
        console.log("Done")
       });
    });
   }
  }
 );
 });
})(AJS.$);

All id's match what's in the dialog code (below,) including the submit button and dialog id. I see the function registered, but it's never called when the submit button is pressed. In fact, nothing was happening when the Confirm button is used and I had to add JS in the dialog code to get it to submit the form. The problem is, it still doesn't make the ajax call. No debug statements below the if (targetId === "sr-dialog")  statement are ever reached.

My experience in JS of this type (jquery/ajax) is pretty limited, so I'm hoping someone can offer ideas on why the JS isn't properly associated to the button and called when it's clicked. I also tried calling the rest function directly in the form action, but that was erring on cross domain issues.

Note also that the resulting code places the submit button for the form outside of /form closure. That does seem to be part of the problem. That's why I needed to add more JS to get a submit when pressed. Until adding that, clicking Confirm did nothing.

import com.onresolve.scriptrunner.runner.rest.common.CustomEndpointDelegate
import groovy.transform.BaseScript
import com.atlassian.jira.component.ComponentAccessor
import com.atlassian.jira.config.properties.APKeys
import javax.ws.rs.core.MediaType
import javax.ws.rs.core.MultivaluedMap
import javax.ws.rs.core.Response
def baseUrl = ComponentAccessor.getApplicationProperties().getString(APKeys.JIRA_BASEURL)
@BaseScript CustomEndpointDelegate delegate

showCopyDialog { MultivaluedMap queryParams ->

   def issueKey = queryParams.getFirst("issueKey") as String;
  // get a reference to the current page...
   // def page = getPage(queryParams)

   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">
     <header class="aui-dialog2-header">
     <h2 class="aui-dialog2-header-main">Copy issue to Jira X</h2>
     <a 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 id="container" style="width:px">
          <form id="my-custom-sr-dialog-form" class="aui" action="#">
           <p>Select the project:</p>
           <br>
           <input id="issueKey" type="hidden" value="${issueKey}"
           <div class="aui-dropdown2-section">
             <select id="projectKey">
               <option value="Proj1">Proj 1</option>
               <option value="Proj2">Proj 2 </option>
             </select>
           </div>
          <br>
          <button id="submit-button" name="submit-button" class="aui-button aui-button-primary">Confirm</button>
        </form>
      </div>
    </div>
    <footer class="aui-dialog2-footer">
      <div class="aui-dialog2-footer-hint">Select the project, click copy to copy issue. </div>
    </footer>
  </section>
"""

Response.ok().type(MediaType.TEXT_HTML).entity(dialog.toString()).build()
}

The JS snippet added to the above:

 <script type="text/javascript">

$(document).ready(function() {
$("#submit-button").click(function() {
$("#my-custom-sr-dialog-form").submit();
});
});
</script>

[Jonathan Rosenberg]

What works for me is to include the form handling script inside the dialog string in the REST endpoint, instead of adding it as a resource. Before your form code, add the handling JS in <script> tags.

Also in the script block, for POST, try XMLHttpRequest

var xhttp = new XMLHttpRequest();

xhttp.open("POST", "${baseUrl}/rest/scriptrunner/latest/custom/restendpoint", false);                    

xhttp.setRequestHeader("Content-type", "application/json");                    

xhttp.send(JSON.stringify(payload));