I can't seem to figure this out, or find any information on this. I'm using the .html() function to generate dynamic HTML to list Camera selection in a radio button format. The code that creates the html is working correctly AFAIK:
var showcameras = function()
{
var html = "<fieldset data-role='controlgroup' data-type='horizontal'>";
for (var i = 0; i < sessiondetails["Camera-Count"]; i++)
{
var name;
var namelabel = "Camera-Names_" + i;
var idlabel = "Camera-ID_" + i;
if (sessiondetails[namelabel]==="")
name = "Camera " + (i+1);
else
name = sessiondetails[namelabel];
html += "<input type='radio' name='"+name+"' id='"+sessiondetails[idlabel]+"' value='"+sessiondetails[idlabel]+"'>";
html += "<label for='"+sessiondetails[idlabel]+"'>"+name+"</label>";
}
html += "</fieldset>";
window.$("#camselection").html(html).trigger("create");
};
This is the HTML it creates:
<fieldset data-role='controlgroup' data-type='horizontal'>
<input type='radio' name='test1' id='10000' value='10000'>
<label for='10000'>test1</label>
<input type='radio' name='Camera 2' id='10001' value='10001'>
<label for='10001'>Camera 2</label>
<input type='radio' name='Camera 3' id='10002' value='10002'>
<label for='10002'>Camera 3</label>
<input type='radio' name='Camera 4' id='10003' value='10003'>
<label for='10003'>Camera 4</label>
</fieldset>
This is the HTML for the "camselection" div tag:
<div id="camselection" data-role="fieldcontain"></div>
Here's the problem, I can select more than one radio button at a time. Doesn't make sense to me since they are in the same fieldset. I've even tried putting onClick('refresh') on each button, but it doesn't work. Any help is greatly appreciated!