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:
- I have a new button (web fragment) on the issue details screen that is tied to a REST endpoint that I implemented in ScriptRunner
- 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.
- Click on the button “Show my Little Form” to bring up the form (works as expected)
- Use the radio buttons to select from the two options (works as expected)
- Click on the Submit button (works as expected)
- You should see the JavaScript pop-up with the message “Number of radio buttons in the group: 2” (works as expected)
- Press ESC to exit out of the dialog (works as expected)
- Click on the button “Show my Little Form” again (this is where the problem starts)
- Try to select between the two options. You will notice that the second radio button is not selectable (problem #1)
- 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)
- 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: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
