Adding a radio button to JQuery buttonset at runtime

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/

I've just updated the url to jsfiddle.net/aembleton/vwemc The one before was missing the first buttonset which is why it worked. I've tested it in Chrome and its also broken in there. — Arthur
– Arthur, Commented May 17, 2011 at 15:38

Naftali · Accepted Answer · 2011-05-17 15:42:00Z

3

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.

answered May 17, 2011 at 15:42

Naftali

147k41 gold badges247 silver badges304 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arthur Over a year ago

Thank you very much. I went back and looked at my actual code and realised that when I tried calling .buttonset('refresh'); I hadn't called .buttonset() before hand which was causing it to fail.

Collectives™ on Stack Overflow

Adding a radio button to JQuery buttonset at runtime

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related