Fixed #20555 -- Make subwidget id attribute available
In `BoundField.__iter__`, the widget's id attribute is now passed to each subwidget. A new id_for_label property was added to ChoiceInput.
This commit is contained in:
parent
db682dcc9e
commit
907ef9d0d1
|
@ -434,7 +434,9 @@ class BoundField(object):
|
|||
This really is only useful for RadioSelect widgets, so that you can
|
||||
iterate over individual radio buttons in a template.
|
||||
"""
|
||||
for subwidget in self.field.widget.subwidgets(self.html_name, self.value()):
|
||||
id_ = self.field.widget.attrs.get('id') or self.auto_id
|
||||
attrs = {'id': id_} if id_ else {}
|
||||
for subwidget in self.field.widget.subwidgets(self.html_name, self.value(), attrs):
|
||||
yield subwidget
|
||||
|
||||
def __len__(self):
|
||||
|
|
|
@ -601,16 +601,15 @@ class ChoiceInput(SubWidget):
|
|||
self.choice_value = force_text(choice[0])
|
||||
self.choice_label = force_text(choice[1])
|
||||
self.index = index
|
||||
if 'id' in self.attrs:
|
||||
self.attrs['id'] += "_%d" % self.index
|
||||
|
||||
def __str__(self):
|
||||
return self.render()
|
||||
|
||||
def render(self, name=None, value=None, attrs=None, choices=()):
|
||||
name = name or self.name
|
||||
value = value or self.value
|
||||
attrs = attrs or self.attrs
|
||||
if 'id' in self.attrs:
|
||||
label_for = format_html(' for="{0}_{1}"', self.attrs['id'], self.index)
|
||||
if self.id_for_label:
|
||||
label_for = format_html(' for="{0}"', self.id_for_label)
|
||||
else:
|
||||
label_for = ''
|
||||
return format_html('<label{0}>{1} {2}</label>', label_for, self.tag(), self.choice_label)
|
||||
|
@ -619,13 +618,15 @@ class ChoiceInput(SubWidget):
|
|||
return self.value == self.choice_value
|
||||
|
||||
def tag(self):
|
||||
if 'id' in self.attrs:
|
||||
self.attrs['id'] = '%s_%s' % (self.attrs['id'], self.index)
|
||||
final_attrs = dict(self.attrs, type=self.input_type, name=self.name, value=self.choice_value)
|
||||
if self.is_checked():
|
||||
final_attrs['checked'] = 'checked'
|
||||
return format_html('<input{0} />', flatatt(final_attrs))
|
||||
|
||||
@property
|
||||
def id_for_label(self):
|
||||
return self.attrs.get('id', '')
|
||||
|
||||
|
||||
class RadioChoiceInput(ChoiceInput):
|
||||
input_type = 'radio'
|
||||
|
|
|
@ -590,25 +590,26 @@ Selector and checkbox widgets
|
|||
.. code-block:: html
|
||||
|
||||
<div class="myradio">
|
||||
<label><input type="radio" name="beatles" value="john" /> John</label>
|
||||
<label for="id_beatles_0"><input id="id_beatles_0" name="beatles" type="radio" value="john" /> John</label>
|
||||
</div>
|
||||
<div class="myradio">
|
||||
<label><input type="radio" name="beatles" value="paul" /> Paul</label>
|
||||
<label for="id_beatles_1"><input id="id_beatles_1" name="beatles" type="radio" value="paul" /> Paul</label>
|
||||
</div>
|
||||
<div class="myradio">
|
||||
<label><input type="radio" name="beatles" value="george" /> George</label>
|
||||
<label for="id_beatles_2"><input id="id_beatles_2" name="beatles" type="radio" value="george" /> George</label>
|
||||
</div>
|
||||
<div class="myradio">
|
||||
<label><input type="radio" name="beatles" value="ringo" /> Ringo</label>
|
||||
<label for="id_beatles_3"><input id="id_beatles_3" name="beatles" type="radio" value="ringo" /> Ringo</label>
|
||||
</div>
|
||||
|
||||
That included the ``<label>`` tags. To get more granular, you can use each
|
||||
radio button's ``tag`` and ``choice_label`` attributes. For example, this template...
|
||||
radio button's ``tag``, ``choice_label`` and ``id_for_label`` attributes.
|
||||
For example, this template...
|
||||
|
||||
.. code-block:: html+django
|
||||
|
||||
{% for radio in myform.beatles %}
|
||||
<label>
|
||||
<label for="{{ radio.id_for_label }}">
|
||||
{{ radio.choice_label }}
|
||||
<span class="radio">{{ radio.tag }}</span>
|
||||
</label>
|
||||
|
@ -618,31 +619,41 @@ Selector and checkbox widgets
|
|||
|
||||
.. code-block:: html
|
||||
|
||||
<label>
|
||||
<label for="id_beatles_0">
|
||||
John
|
||||
<span class="radio"><input type="radio" name="beatles" value="john" /></span>
|
||||
</label>
|
||||
<label>
|
||||
Paul
|
||||
<span class="radio"><input type="radio" name="beatles" value="paul" /></span>
|
||||
</label>
|
||||
<label>
|
||||
George
|
||||
<span class="radio"><input type="radio" name="beatles" value="george" /></span>
|
||||
</label>
|
||||
<label>
|
||||
Ringo
|
||||
<span class="radio"><input type="radio" name="beatles" value="ringo" /></span>
|
||||
<span class="radio"><input id="id_beatles_0" name="beatles" type="radio" value="john" /></span>
|
||||
</label>
|
||||
|
||||
If you decide not to loop over the radio buttons -- e.g., if your template simply includes
|
||||
``{{ myform.beatles }}`` -- they'll be output in a ``<ul>`` with ``<li>`` tags, as above.
|
||||
<label for="id_beatles_1">
|
||||
Paul
|
||||
<span class="radio"><input id="id_beatles_1" name="beatles" type="radio" value="paul" /></span>
|
||||
</label>
|
||||
|
||||
<label for="id_beatles_2">
|
||||
George
|
||||
<span class="radio"><input id="id_beatles_2" name="beatles" type="radio" value="george" /></span>
|
||||
</label>
|
||||
|
||||
<label for="id_beatles_3">
|
||||
Ringo
|
||||
<span class="radio"><input id="id_beatles_3" name="beatles" type="radio" value="ringo" /></span>
|
||||
</label>
|
||||
|
||||
If you decide not to loop over the radio buttons -- e.g., if your template
|
||||
simply includes ``{{ myform.beatles }}`` -- they'll be output in a ``<ul>``
|
||||
with ``<li>`` tags, as above.
|
||||
|
||||
.. versionchanged:: 1.6
|
||||
|
||||
The outer ``<ul>`` container will now receive the ``id`` attribute defined on
|
||||
the widget.
|
||||
|
||||
.. versionchanged:: 1.7
|
||||
|
||||
When looping over the radio buttons, the ``label`` and ``input`` tags include
|
||||
``for`` and ``id`` attributes, respectively. Each radio button has an
|
||||
``id_for_label`` attribute to output the element's ID.
|
||||
|
||||
``CheckboxSelectMultiple``
|
||||
~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
|
@ -666,6 +677,12 @@ the widget.
|
|||
Like :class:`RadioSelect`, you can now loop over the individual checkboxes making
|
||||
up the lists. See the documentation of :class:`RadioSelect` for more details.
|
||||
|
||||
.. versionchanged:: 1.7
|
||||
|
||||
When looping over the checkboxes, the ``label`` and ``input`` tags include
|
||||
``for`` and ``id`` attributes, respectively. Each checkbox has an
|
||||
``id_for_label`` attribute to output the element's ID.
|
||||
|
||||
.. _file-upload-widgets:
|
||||
|
||||
File upload widgets
|
||||
|
|
|
@ -145,6 +145,13 @@ Minor features
|
|||
* Explicit :class:`~django.db.models.OneToOneField` for
|
||||
:ref:`multi-table-inheritance` are now discovered in abstract classes.
|
||||
|
||||
* The ``<label>`` and ``<input>`` tags rendered by
|
||||
:class:`~django.forms.RadioSelect` and
|
||||
:class:`~django.forms.CheckboxSelectMultiple` when looping over the radio
|
||||
buttons or checkboxes now include ``for`` and ``id`` attributes, respectively.
|
||||
Each radio button or checkbox includes an ``id_for_label`` attribute to
|
||||
output the element's ID.
|
||||
|
||||
Backwards incompatible changes in 1.7
|
||||
=====================================
|
||||
|
||||
|
|
|
@ -833,6 +833,22 @@ beatle J R Ringo False""")
|
|||
with self.assertRaises(IndexError):
|
||||
r[42]
|
||||
|
||||
def test_subwidget(self):
|
||||
# Each subwidget tag gets a separate ID when the widget has an ID specified
|
||||
self.assertHTMLEqual("\n".join([c.tag() for c in CheckboxSelectMultiple(attrs={'id': 'abc'}).subwidgets('letters', list('ac'), choices=zip(list('abc'), list('ABC')))]), """<input checked="checked" type="checkbox" name="letters" value="a" id="abc_0" />
|
||||
<input type="checkbox" name="letters" value="b" id="abc_1" />
|
||||
<input checked="checked" type="checkbox" name="letters" value="c" id="abc_2" />""")
|
||||
|
||||
# Each subwidget tag does not get an ID if the widget does not have an ID specified
|
||||
self.assertHTMLEqual("\n".join([c.tag() for c in CheckboxSelectMultiple().subwidgets('letters', list('ac'), choices=zip(list('abc'), list('ABC')))]), """<input checked="checked" type="checkbox" name="letters" value="a" />
|
||||
<input type="checkbox" name="letters" value="b" />
|
||||
<input checked="checked" type="checkbox" name="letters" value="c" />""")
|
||||
|
||||
# The id_for_label property of the subwidget should return the ID that is used on the subwidget's tag
|
||||
self.assertHTMLEqual("\n".join(['<input type="checkbox" name="letters" value="%s" id="%s" />' % (c.choice_value, c.id_for_label) for c in CheckboxSelectMultiple(attrs={'id': 'abc'}).subwidgets('letters', [], choices=zip(list('abc'), list('ABC')))]), """<input type="checkbox" name="letters" value="a" id="abc_0" />
|
||||
<input type="checkbox" name="letters" value="b" id="abc_1" />
|
||||
<input type="checkbox" name="letters" value="c" id="abc_2" />""")
|
||||
|
||||
def test_multi(self):
|
||||
class MyMultiWidget(MultiWidget):
|
||||
def decompress(self, value):
|
||||
|
|
Loading…
Reference in New Issue