How can I debug JS script which I've added in scriptrunner Rest endpoint

[aas]

Hello community!

I've created script fragments "Custom Web item" with name "MyButton" which runs code and displays a dialog (Link: https://myjira.com/rest/scriptrunner/latest/custom/showDialogNew)

In REST Endpoints I've created Rest Endpoint showDialogNew 

import com.onresolve.scriptrunner.runner.rest.common.CustomEndpointDelegate

import groovy.transform.BaseScript

@BaseScript CustomEndpointDelegate delegate

showDialog { MultivaluedMap queryParams -> 

    //Some groovy here

    def dialog =
    """    

    <section id="create-dialog" class="aui-dialog2 aui-dialog2-large aui-layer"    data-aui-remove-on-hide="true" role="dialog" aria-hidden="true">   

    <form id="new-change-form" class="aui">

        //Form is here

    </form>

   <footer class="aui-dialog2-footer">

        <div class="aui-dialog2-footer-actions">

<button id="my-dialog-ok-button" form="new-change-form" type="submit">Save</button>

            <button id="my-dialog-cancel-button" Cancel</button>

        </div>

    </footer>    

    </section>

    <script>        

          \$("#new-change-form").submit(function (e) {

              e.preventDefault();

              var form_data = \$(this).serializeObject();

              form_data.parentIssue = JIRA.Issue.getIssueKey();          

            var request = JIRA.SmartAjax.makeRequest({

                url: 'https://myjira.com/rest/scriptrunner/latest/custom/createIssueMy',

                type: 'POST',

                data: JSON.stringify(form_data),

                dataType: 'json',

                contentType: 'application/json'

            });       

            request.fail(function(){

                alert(Some problem: '+request.responseText);

            });       

            request.done(function(){

                location.reload();

            });       

            AJS.dialog2("#create-dialog").hide();

        });    </script>

    """

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

 I want to debug this script in chrome dev tools when I push "MyButton", but I can't find my script in source tab. How can I debug it?

Also why making ajax calls like JIRA.SmartAjax.makeRequest({ }); works but here it looks like AJS.$.ajax({ }); what is the difference and where can I find any docs about js api?

I will be glad for any help.

[Ram Kumar Aravindakshan _Adaptavist_ · Accepted solution]

Hi @aas

The approach you are taking appears to be incorrect.

If you intend to trigger a new Dialog via the Custom Web Item Fragment, you need only to add the section below for the REST Endpoint:-

import com.onresolve.scriptrunner.runner.rest.common.CustomEndpointDelegate
import groovy.transform.BaseScript

import javax.ws.rs.core.MediaType
import javax.ws.rs.core.MultivaluedMap
import javax.ws.rs.core.Response

@BaseScript CustomEndpointDelegate delegate

showDialog { MultivaluedMap queryParams ->

    // 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">Some dialog</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">
                <p>This is a dialog...</p>
            </div>
            <footer class="aui-dialog2-footer">
                <div class="aui-dialog2-footer-actions">
                    <button id="dialog-close-button" class="aui-button aui-button-link">Close</button>
                </div>
                <div class="aui-dialog2-footer-hint">Some hint here if you like</div>
            </footer>
        </section>
        """

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

Below is a screenshot of the REST Endpoint configuration:-

Regarding the javascript, you need to add it into the Custom Web Item Fragment as a javascript file.

Please try the approach above and see if you can view the javascript in the browser.

Thank you and Kind regards,
Ram

[aas]

Hello @Ram Kumar Aravindakshan _Adaptavist_ 

You mean I don't have to add js like inline script? But where can I add it in Fragments? There is no any place where I can add it

The condition is empty so that everything is included in the picture
Previously JS script was added in showDialog rest endpoint

[Ram Kumar Aravindakshan _Adaptavist_]

Hi @aas

In your last comment, you asked:-

You mean I don't have to add js like inline script?

The answer is yes; you don't need to add it to the inline script.

You also asked:-

But where can I add it in Fragments? There is no any place where I can add it

If you read through the ScriptRunner Web Item documentation carefully, you will notice that it provides a link for the Web Resources Fragment as shown in the image below:-

This link points you to the ScriptRunner Web Resources documentation which explains how you need to setup the custom directory to add the javascript.

You only need to use javascript if you want to make a more complex request. Else, the invocation to the REST Endpoint should be enough.

I hope this helps to solve your question. :-)

Thank you and Kind regards,

Ram

[aas]

@Ram Kumar Aravindakshan _Adaptavist_thanks a lot for your help!