$().buttonset not working on dialog modal box JQUERY

Question

Hello everyone! I've done a dialog box that contains a form inside it, and I would like to add some jquery fancy items to it. I've been trying with $().buttonset() as I've done with most of my radio buttons in the application, in order to get a coherent IU for my application. The thing is that, even if following the rules specified, the buttons remain as a normal radio button, and not with the fancy interface. Do you know what could be the problem?

This is the part of the form where I want the fancy radio buttons:

<div id ="Replace">
    <input type="radio" name="Replace" value = "true"  id = "ReplaceYes" 
           onclick = "setReplace(this)" />
    <label for="ReplaceYes">Yes</label>
    <input type="radio" name="Replace" value = "false" checked="checked" 
           id = "ReplaceNo" onclick = "setReplace(this)" />
    <label for="ReplaceNo">No</label>
</div> 

And then, as the previous part of code is in a partial view, invoked when showing the modal box, this is how I try to convert the buttons appearance:

$("#Replace").buttonset();

The thing is that, debugging it I've seen that it goes through that part of the code, but it doesn't do what it's meant to do. Any clue?

Thanks everyone for your attention, vikitor

Answer 1

Updated: I had never used .buttonset() before, in any case it works against your markup, you can see a demo here. This demo uses the same code as the question:

$("#Replace").buttonset();

Make sure you're including the jQuery UI CSS correctly, and that your IDs are unique, if they are not you'll get some real funny behavior, and should switch to a class. Also, ensure that this part of your view is in the DOM when it runs, e.g. is it inside a document.ready event handler like this?

$(function() {
 $("#Replace").buttonset();
});