How to refresh styles and layout of radio buttons in jQuery Mobile?

Question

I'm using

$("input[type='radio']").checkboxradio("refresh");

to refresh a container of radio buttons. Except when I remove/add a radio button from/to the top or bottom, I do not get rounded corners on the new (top or bottom) radio button.

Here is the jquery ajax function that contains the code for removing a radio button:

$.ajax({
 type: "POST",
 url: url,
 data: data,
 dataType: "json",
 success: function(resp) {                              
    $("'label[for="+key+"]'").parent().remove();
}

Here is the form:

<form id="test-form">
  <div data-role="fieldcontain" id="test">
    <fieldset data-role="controlgroup">
        <input type="radio" name="key" id="{{a.key}}" value="{{a.key}}" 
    <label for="{{a.key}}">{{a.name}}</label>
        <input type="radio" name="key" id="{{b.key}}" value="{{b.key}}" 
    <label for="{{b.key}}">{{b.name}}</label>
        <input type="radio" name="key" id="{{c.key}}" value="{{c.key}}" 
    <label for="{{c.key}}">{{c.name}}</label>
    </fieldset>
  </div>
</form>

You might need to add the refresh on a function like change() — Phill Pafford, Jun 01 '11 at 19:01
Isn't change() fired when there is user input on the radio buttons, like one is selected? In my case the change I need to listen for is the addition or removal of a radio button. — Will Curran, Jun 01 '11 at 19:17
releated: http://stackoverflow.com/questions/5392402/jqm-jquerymobile-dynamically-removing-elements — Phill Pafford, Jun 01 '11 at 21:00

naugtur · Answer 1 · 2011-06-02T14:06:25.537

0

~~Call .page() on an element that is a parent of the element that doesn't render correctly.~~

We'll have to find a way to do it with refresh

edited Jun 02 '11 at 14:06

answered Jun 02 '11 at 07:14

naugtur

16,827
5
70
113

I've tried that, based on other advice and it doesn't work. For example if I remove the top radio button, and then call .page() on the form element for those buttons, they do not refresh - the (new) top radio button does not take on the style for a top button. – Will Curran Jun 02 '11 at 13:37
There's another trick with .page - you have to call it only once on an element. so it probably ignored the call on form... let me think of another solution. – naugtur Jun 02 '11 at 14:05
I don't have enough time to work on it myself, could you publish an example of the issue for me to take a look? I'm sure I can get it to work, at worst by providing a way to do it manually – naugtur Jun 02 '11 at 17:51
Thanks! I updated the post with my code. Note there are some Django template tags but you'll get the idea. – Will Curran Jun 02 '11 at 19:00
I hoped for a working example. I'd need to see it happen. Now I don't even see how it sould work as the code you posted should remove the whole fieldset and do nothing else (I know, after JQM enhances it there's more html and it probably works, but how am I supposed to do it all in my head?). Please post a link to a working copy and I'll give you a solution that will not be a guess. – naugtur Jun 03 '11 at 07:14

How to refresh styles and layout of radio buttons in jQuery Mobile?

1 Answers1