Strange behavior with web fragment when using the option "Run code and display dialog"

[Kamran Ansari]

I’m trying to implement a feature through ScriptRunner that involves extending the Jira “issue details” screen using a web fragment (a button), which in turn shows a dialog box with a form. For the purpose of demonstrating this issue, I have kept the implementation to a minimum (the form only contains a couple of Radio Buttons and a Submit button).

 To summarize:

1. I have a new button (web fragment) on the issue details screen that is tied to a REST endpoint that I implemented in ScriptRunner
2. The REST endpoint returns the dialog to be shown with two radio buttons and a Submit button. Upon hitting the Submit button, a JavaScript dialog pops-up displaying the number of radio buttons it found on the form (this should always be 2).

 

However, when I execute the following sequence, my JavaScript somehow thinks bumps up the radio button count by 2 upon every single invocation of this sequence.

1. Click on the button “Show my Little Form” to bring up the form (works as expected)
2. Use the radio buttons to select from the two options (works as expected)
3. Click on the Submit button (works as expected)
4. You should see the JavaScript pop-up with the message “Number of radio buttons in the group: 2” (works as expected)
5. Press ESC to exit out of the dialog (works as expected)
6. Click on the button “Show my Little Form” again (this is where the problem starts)
7. Try to select between the two options. You will notice that the second radio button is not selectable (problem #1)
8. Now click on the Submit button. You will notice that the number of pop-ups is now 4 in the message (problem #2 – this should have been 2 and not 4)
9. Repeat steps (5) through (8) and see the number go up by 2 every time.

 Interestingly, if you refresh the web page after exiting the dialog, the dialog shows the correct number again, and both radio buttons are selectable.

 

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

showForm_Debug { MultivaluedMap queryParams ->
def header = 
"""
<!-- Dialog header -->
<header class="aui-dialog2-header">
<h2 class="aui-dialog2-header-main">Test Form</h2>
<a class="aui-dialog2-header-close">
<span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
</a>
</header>
"""

def formContent = 
"""
<form class="aui" name="crb_main_form">
<div class="field-group" id="cal_fieldgroup_id1">
<label for="cal_fieldgroup_id1">Phase Found</label>
<div class="radio">
<input class="radio" type="radio" checked="checked" name="radiobuttons_phase_found" id="rbStaging">
<label for="rbStaging">Pre-Production</label>
</div>

<div class="radio">
<input class="radio" type="radio" name="radiobuttons_phase_found" id="rbProduction">
<label for="rbProduction">Production</label>
</div>
</div>
</form> 
"""

def footer = 
"""
<!-- Dialog footer -->
<footer class="aui-dialog2-footer">
<div class="aui-dialog2-footer-actions">
<form id="my-custom-sr-dialog-form" class="aui" action="javascript&colon;getSelectedPhase()">
<button id="submit-button" class="aui-button aui-button-primary">Submit</button>
</form>
</div>
</footer>
"""

def scripts =
"""
<script>
function getSelectedPhase()
{
var radios = document.getElementsByName('radiobuttons_phase_found');
var msg = "Number of radio buttons in the group: " + radios.length
alert(msg);
}
</script>
"""

def dialog = 
"""
<section id="static-dialog" class="aui-dialog2 aui-dialog2-large" role="dialog">
${header}
${formContent}
${footer}
${scripts}
</section>

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

I'm at a loss to understand this behavior, and I'm hoping someone from this community could shed some light and hopefully point to what I'm doing wrong here and/or offer suggestions on how to fix this.

Many thanks,

Kamran

[PD Sheehan]

xxx.setFormValue(null) is your problem.

You are explicitly telling the behavior to clear our those fields.