Question

I would like to use jquery ui buttonset for a radioselect from a django form. I am using the custom renderer below for the radioselect widget, but the input lands inside the label. jquery ui doesn’t work with that structure. What do I need to change in the renderer to put the input tag before the label?

forms.py:

class SimpleRadioFieldRenderer(forms.widgets.RadioFieldRenderer):
    def render(self):
        """Outputs widget without <ul> or <li> tags."""
        return mark_safe(u'\n'.join([u'%s'
                % force_unicode(w) for w in self]))
class MyForm(Form):
    myradiofield = ChoiceField(
            widget=RadioSelect(renderer=SimpleRadioFieldRenderer),
            required=True,
            choices=(('a','one choice'), ('b','another choice')))

Here is how django renders this in the template:

<label for="id_myradiofield_0"><input type="radio" name="myradiofield" value="a" id="id_myradiofield_0"> one choice</label>
<label for="id_myradiofield_1"><input type="radio" name="myradiofield" value="b" id="id_myradiofield_0"> another choice</label>

Here is how jquery ui expects it to look:

<input type="radio" name="myradiofield" value="a" id="id_myradiofield_0"><label for="id_myradiofield_0"> one choice</label>
<input type="radio" name="myradiofield" value="b" id="id_myradiofield_0"> <label for="id_myradiofield_1">another choice</label>

Thanks in advance for your help.

Answer 1

You can extend RadioInput and RadioFieldRenderer classes for the issue and use MyCustomRenderer as renderer

class MyRadioInput(RadioInput):
    def __unicode__(self):
        if 'id' in self.attrs:
            label_for = ' for="%s_%s"' % (self.attrs['id'], self.index)
        else:
            label_for = ''
        choice_label = conditional_escape(force_unicode(self.choice_label))
        return mark_safe(u'<label%s>%s</label>%s' % (label_for, choice_label, self.tag()))


class MyCustomRenderer( RadioFieldRenderer ):

    def __iter__(self):
        for i, choice in enumerate(self.choices):
            yield MyRadioInput(self.name, self.value, self.attrs.copy(), choice, i)

    def __getitem__(self, idx):
        choice = self.choices[idx] # Let the IndexError propogate
        return MyRadioInput(self.name, self.value, self.attrs.copy(), choice, idx)

If you want a solution client side instead:

<script>
    $("label>input").each(function(index, item){                
        $(item).insertBefore($(item).parent())  
    })
</script>

You can have the solution by modifying django.forms.widgets.py:
scroll to class RadioInput

we will modify last line of

def __unicode__(self):

return mark_safe(u'<label%s>%s %s</label>' % (label_for, self.tag(), choice_label)) #OLD

goes to

return mark_safe(u'<label%s>%s</label>%s' % (label_for, choice_label, self.tag())) #NEW