Unable to pre-populate radio buttons in an Atlassian Dialog box

[AnupamS]

Hello, 

I am trying to configure a plugin module where a click will open up a dialog box with some radio buttons on it. These radio buttons are working fine except that when it is loading, none of them are checked even if I am adding the checked attribute to the first elements.

I tried to copy the code and run in atlassian sand box or code editor and it works, but it doesn't with the actual Jira screen. I debugged further and suspect that the wrapper for dialog while adding with the html content of radio buttons is somehow removing this.

Is there anyway that I can accomplish this? I need this as I want to retain the user choices once they are set or pre-populate them with default option.

Sample HTML which works fine in editiors or sand box but not in dialog panel is below:

<fieldset class="sdu-radio-btn group"> <legend><span>Process Node</legend> </span> <div class="radio"><label for="sdu-process-node">>14nm</label> <input class="radio" type="radio" checked name="sdu-process-node" value=">14nm" id="sdu-process-node-1"></div> <div class="radio"><label for="sdu-process-node">10-14nm</label> <input class="radio" type="radio" name="sdu-process-node" value="10-14nm" id="sdu-process-node-2"></div> <div class="radio"><label for="sdu-process-node">< 10nm</label> <input class="radio" type="radio" name="sdu-process-node" value="< 10nm" id="sdu-process-node-3"></div> </fieldset> <br> <fieldset class="sdu-radio-btn group"> <legend><span>Gate Count (NAND Equiv)</legend> </span> <div class="radio"><label for="sdu-gate-count-nand-equiv">< 500k</label> <input class="radio" type="radio" checked name="sdu-gate-count-nand-equiv" value="< 500k" id="sdu-gate-count-nand-equiv-1"></div> <div class="radio"><label for="sdu-gate-count-nand-equiv">500k - 1,000k</label> <input class="radio" type="radio" name="sdu-gate-count-nand-equiv" value="500k - 1,000k" id="sdu-gate-count-nand-equiv-2"></div> <div class="radio"><label for="sdu-gate-count-nand-equiv">> 1,000k</label> <input class="radio" type="radio" name="sdu-gate-count-nand-equiv" value="> 1,000k" id="sdu-gate-count-nand-equiv-3"></div> </fieldset> <fieldset class="sdu-radio-btn group"> <legend><span>Run Time (PnR from import to apr_final)</legend> </span> <div class="radio"><label for="sdu-run-time-pnr-from-import-to-apr_final"><2 days</label> <input class="radio" type="radio" checked name="sdu-run-time-pnr-from-import-to-apr_final" value="<2 days" id="sdu-run-time-pnr-from-import-to-apr_final-1"></div> <div class="radio"><label for="sdu-run-time-pnr-from-import-to-apr_final">3 to 5 days</label> <input class="radio" type="radio" name="sdu-run-time-pnr-from-import-to-apr_final" value="3 to 5 days" id="sdu-run-time-pnr-from-import-to-apr_final-2"></div> <div class="radio"><label for="sdu-run-time-pnr-from-import-to-apr_final">> 5 Days</label> <input class="radio" type="radio" name="sdu-run-time-pnr-from-import-to-apr_final" value="> 5 Days" id="sdu-run-time-pnr-from-import-to-apr_final-3"></div> </fieldset> <fieldset class="sdu-radio-btn group"> <legend><span>Utilization Target</legend> </span> <div class="radio"><label for="sdu-utilization-target">< 50%</label> <input class="radio" type="radio" checked name="sdu-utilization-target" value="< 50%" id="sdu-utilization-target-1"></div> <div class="radio"><label for="sdu-utilization-target">50-70%</label> <input class="radio" type="radio" name="sdu-utilization-target" value="50-70%" id="sdu-utilization-target-2"></div> <div class="radio"><label for="sdu-utilization-target">> 70%</label> <input class="radio" type="radio" name="sdu-utilization-target" value="> 70%" id="sdu-utilization-target-3"></div> </fieldset> <br>

[DPKJ · Accepted solution]

Your HTML seems to be broken at many places, here is sanitized version.

<fieldset class="sdu-radio-btn group">
<legend><span>Process Node</span></legend>
<div class="radio">
<label for="sdu-process-node">>14nm</label>
<input
class="radio"
type="radio"
checked="checked"
name="sdu-process-node"
value=">14nm"
id="sdu-process-node-1"
/>
</div>
<div class="radio">
<label for="sdu-process-node">10-14nm</label>
<input
class="radio"
type="radio"
name="sdu-process-node"
value="10-14nm"
id="sdu-process-node-2"
/>
</div>
<div class="radio">
<label for="sdu-process-node">< 10nm</label>
<input
class="radio"
type="radio"
name="sdu-process-node"
value="< 10nm"
id="sdu-process-node-3"
/>
</div>
</fieldset>
<br />
<fieldset class="sdu-radio-btn group">
<legend><span>Gate Count (NAND Equiv)</span></legend>
<div class="radio">
<label for="sdu-gate-count-nand-equiv">< 500k</label>
<input
class="radio"
type="radio"
checked="checked"
name="sdu-gate-count-nand-equiv"
value="< 500k"
id="sdu-gate-count-nand-equiv-1"
/>
</div>
<div class="radio">
<label for="sdu-gate-count-nand-equiv">500k - 1,000k</label>
<input
class="radio"
type="radio"
name="sdu-gate-count-nand-equiv"
value="500k - 1,000k"
id="sdu-gate-count-nand-equiv-2"
/>
</div>
<div class="radio">
<label for="sdu-gate-count-nand-equiv">> 1,000k</label>
<input
class="radio"
type="radio"
name="sdu-gate-count-nand-equiv"
value="> 1,000k"
id="sdu-gate-count-nand-equiv-3"
/>
</div>
</fieldset>
<fieldset class="sdu-radio-btn group">
<legend><span>Run Time (PnR from import to apr_final)</span></legend>
<div class="radio">
<label for="sdu-run-time-pnr-from-import-to-apr_final">< 2 days</label>
<input
class="radio"
type="radio"
checked="checked"
name="sdu-run-time-pnr-from-import-to-apr_final"
value="<2 days"
id="sdu-run-time-pnr-from-import-to-apr_final-1"
/>
</div>
<div class="radio">
<label for="sdu-run-time-pnr-from-import-to-apr_final">3 to 5 days</label>
<input
class="radio"
type="radio"
name="sdu-run-time-pnr-from-import-to-apr_final"
value="3 to 5 days"
id="sdu-run-time-pnr-from-import-to-apr_final-2"
/>
</div>
<div class="radio">
<label for="sdu-run-time-pnr-from-import-to-apr_final">> 5 Days</label>
<input
class="radio"
type="radio"
name="sdu-run-time-pnr-from-import-to-apr_final"
value="> 5 Days"
id="sdu-run-time-pnr-from-import-to-apr_final-3"
/>
</div>
</fieldset>
<fieldset class="sdu-radio-btn group">
<legend><span>Utilization Target</span></legend>
<div class="radio">
<label for="sdu-utilization-target">< 50%</label>
<input
class="radio"
type="radio"
checked="checked"
name="sdu-utilization-target"
value="< 50%"
id="sdu-utilization-target-1"
/>
</div>
<div class="radio">
<label for="sdu-utilization-target">50-70%</label>
<input
class="radio"
type="radio"
name="sdu-utilization-target"
value="50-70%"
id="sdu-utilization-target-2"
/>
</div>
<div class="radio">
<label for="sdu-utilization-target">> 70%</label>
<input
class="radio"
type="radio"
name="sdu-utilization-target"
value="> 70%"
id="sdu-utilization-target-3"
/>
</div>
</fieldset>
<br />

Try with this.

[AnupamS]

I can assure that even if this code has breakage, I tried to copy paste directly from the atlassian samples as well as making it only one field set and exploring. Nothing worked. 

As for your code, even this doesn't work the way we expect (first option to be checked when it opens up).

[AnupamS]

Here is the sample code from Atlassian sandbox

// Note this is a small dialog, so it fits in the Sandbox panel
// Standard sizes are 400, 600 and 840 pixels wide
var dialog = new AJS.Dialog({
width: 400,
height: 300,
id: "example-dialog",
closeOnOutsideClick: true
});

// PAGE 0 (first page)
// adds header for first page
dialog.addHeader("Dialog - Page 0");
var z = ' <fieldset class="sdu-radio-btn group"> ' +
' <legend><span>Process Node</span></legend> ' +
' <div class="radio"> ' +
' <label for="sdu-process-node">>14nm</label> ' +
' <input ' +
' class="radio" ' +
' type="radio" ' +
' checked="checked" ' +
' name="sdu-process-node" ' +
' value=">14nm" ' +
' id="sdu-process-node-1" ' +
' /> ' +
' </div> ' +
' <div class="radio"> ' +
' <label for="sdu-process-node">10-14nm</label> ' +
' <input ' +
' class="radio" ' +
' type="radio" ' +
' name="sdu-process-node" ' +
' value="10-14nm" ' +
' id="sdu-process-node-2" ' +
' /> ' +
' </div> ' +
' <div class="radio"> ' +
' <label for="sdu-process-node">< 10nm</label> ' +
' <input ' +
' class="radio" ' +
' type="radio" ' +
' name="sdu-process-node" ' +
' value="< 10nm" ' +
' id="sdu-process-node-3" ' +
' /> ' +
' </div> ' +
' </fieldset> ' +
' <br /> ' +
' <fieldset class="sdu-radio-btn group"> ' +
' <legend><span>Gate Count (NAND Equiv)</span></legend> ' +
' <div class="radio"> ' +
' <label for="sdu-gate-count-nand-equiv">< 500k</label> ' +
' <input ' +
' class="radio" ' +
' type="radio" ' +
' checked="checked" ' +
' name="sdu-gate-count-nand-equiv" ' +
' value="< 500k" ' +
' id="sdu-gate-count-nand-equiv-1" ' +
' /> ' +
' </div> ' +
' <div class="radio"> ' +
' <label for="sdu-gate-count-nand-equiv">500k - 1,000k</label> ' +
' <input ' +
' class="radio" ' +
' type="radio" ' +
' name="sdu-gate-count-nand-equiv" ' +
' value="500k - 1,000k" ' +
' id="sdu-gate-count-nand-equiv-2" ' +
' /> ' +
' </div> ' +
' <div class="radio"> ' +
' <label for="sdu-gate-count-nand-equiv">> 1,000k</label> ' +
' <input ' +
' class="radio" ' +
' type="radio" ' +
' name="sdu-gate-count-nand-equiv" ' +
' value="> 1,000k" ' +
' id="sdu-gate-count-nand-equiv-3" ' +
' /> ' +
' </div> ' +
' </fieldset> ' +
' <fieldset class="sdu-radio-btn group"> ' +
' <legend><span>Run Time (PnR from import to apr_final)</span></legend> ' +
' <div class="radio"> ' +
' <label for="sdu-run-time-pnr-from-import-to-apr_final">< 2 days</label> ' +
' <input ' +
' class="radio" ' +
' type="radio" ' +
' checked="checked" ' +
' name="sdu-run-time-pnr-from-import-to-apr_final" ' +
' value="<2 days" ' +
' id="sdu-run-time-pnr-from-import-to-apr_final-1" ' +
' /> ' +
' </div> ' +
' <div class="radio"> ' +
' <label for="sdu-run-time-pnr-from-import-to-apr_final">3 to 5 days</label> ' +
' <input ' +
' class="radio" ' +
' type="radio" ' +
' name="sdu-run-time-pnr-from-import-to-apr_final" ' +
' value="3 to 5 days" ' +
' id="sdu-run-time-pnr-from-import-to-apr_final-2" ' +
' /> ' +
' </div> ' +
' <div class="radio"> ' +
' <label for="sdu-run-time-pnr-from-import-to-apr_final">> 5 Days</label> ' +
' <input ' +
' class="radio" ' +
' type="radio" ' +
' name="sdu-run-time-pnr-from-import-to-apr_final" ' +
' value="> 5 Days" ' +
' id="sdu-run-time-pnr-from-import-to-apr_final-3" ' +
' /> ' +
' </div> ' +
' </fieldset> ' +
' <fieldset class="sdu-radio-btn group"> ' +
' <legend><span>Utilization Target</span></legend> ' +
' <div class="radio"> ' +
' <label for="sdu-utilization-target">< 50%</label> ' +
' <input ' +
' class="radio" ' +
' type="radio" ' +
' checked="checked" ' +
' name="sdu-utilization-target" ' +
' value="< 50%" ' +
' id="sdu-utilization-target-1" ' +
' /> ' +
' </div> ' +
' <div class="radio"> ' +
' <label for="sdu-utilization-target">50-70%</label> ' +
' <input ' +
' class="radio" ' +
' type="radio" ' +
' name="sdu-utilization-target" ' +
' value="50-70%" ' +
' id="sdu-utilization-target-2" ' +
' /> ' +
' </div> ' +
' <div class="radio"> ' +
' <label for="sdu-utilization-target">> 70%</label> ' +
' <input ' +
' class="radio" ' +
' type="radio" ' +
' name="sdu-utilization-target" ' +
' value="> 70%" ' +
' id="sdu-utilization-target-3" ' +
' /> ' +
' </div> ' +
' </fieldset> ' +
' <br /> ' ;

// add panel 1
dialog.addPanel("Panel 1", z, "panel-body");
// You can remove padding with:
// dialog.get("panel:0").setPadding(0);

// add panel 2 (this will create a menu on the left side for selecting panels within page 0)
dialog.addPanel("Panel 2", "<p>Some content for panel 2.</p><div style='height: 2000px;'>(forced-height element to demonstrate scrolling content)</div><p>End.</p>", "panel-body");

dialog.addButton("Next", function (dialog) {
dialog.nextPage();
});
dialog.addLink("Cancel", function (dialog) {
dialog.hide();
}, "#");

// PAGE 1 (second page)
// adds a new page to dialog
dialog.addPage();

// adds header for second page
dialog.addHeader("Dialog - Page 1");

// adds a single panel on second page (as there is only one panel, no menu will appear on the left side)
dialog.addPanel("SinglePanel", z, "singlePanel");

// add "Previous" button to page 1
dialog.addButton("Previous", function(dialog) {
dialog.prevPage();
});
// adds "Cancel" button to page 1
dialog.addButton("Cancel", function (dialog) {
dialog.hide();
});

// Add events to dialog trigger elements
AJS.$("#dialog-button").click(function() {
// PREPARE FOR DISPLAY
// start first page, first panel
dialog.gotoPage(0);
dialog.gotoPanel(0);
dialog.show();
});

[DPKJ]

Wrap whole form in <form> tag. Something like this.

....

z = '<form>' + z + '</form>';

dialog.addPanel("Panel 1", z, "panel-body");
....

[AnupamS]

I think the wrapping did the trick. Thanks a lot!