Question

I am trying to add a radio button to a buttonset at runtime. This is my HTML:

<form>
  <div id="container">
    <input type="radio" id="radio1" name="tipo" value="1"/>
    <label for="radio1">Alt1</label>

    <input type="radio" id="radio2" name="tipo" value="2"/>
    <label for="radio2">Alt2</label>   
  </div>
</form>

and this is my Javascript:

$(function() {
  $("#container").buttonset();
  $("#container").append("<input type='radio' id='radio3' name='tipo' value='3'/><label for='radio3'>Alt3</label>");
  $("#container").buttonset();
})

This shows Alt1 and Alt2 in the JQueryUI skin. Alt3 appears as a normal radio button. If I comment out the first buttonset like so it works:

$(function() {
  //$("#container").buttonset();
  $("#container").append("<input type='radio' id='radio3' name='tipo' value='3'/><label for='radio3'>Alt3</label>");
  $("#container").buttonset();
})

It seems that you can only set the buttonset once. I read elsewhere that you should be able to call:

$("#container").buttonset('refresh');

But that doesn’t work for me.

Has anyone found a way around this? The above code is a simplified version of what I am trying to do. I am appending to the container at runtime, and I want the radio buttons to appear as JQueryUI style. The above code is simplified to show just what the problem is.

You can try it for yourself here: http://jsfiddle.net/aembleton/vwemc/

Answer 1

Here is an updated fiddle: http://jsfiddle.net/maniator/w6Fec/3/

Here is the code:

$(function() {
    $("#container").buttonset();
    $("#container").append("<input type='radio' id='radio3' name='tipo' value='3'/><label for='radio3'>Alt3</label>");
    $("#container").buttonset('refresh');
})

For some reason in your fiddle you were using 2 jQueryUI’s.