Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#14830 closed (fixed)

Default value for radio button not preserved when dynamically creating new inlines

Reported by: Julien Phalip Owned by: nobody
Component: contrib.admin Version: 1.2
Severity: Keywords: sprintdec2010
Cc: Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: no


Here is a simple test case illustrating the problem:


    from django.db import models

    class MyModel(models.Model):
        name = models.CharField(max_length=100, blank=True)
    CHOICES = (
        (u'1', u'blue'),
        (u'2', u'red'),
    class RelatedModel(models.Model):
        MyModel = models.ForeignKey(MyModel)
        color = models.CharField(max_length=1, choices=CHOICES, default='1')


    from django.contrib import admin
    from .models import MyModel, RelatedModel
    class RelatedModelInline(admin.TabularInline):
        model = RelatedModel
        radio_fields = {"color": admin.HORIZONTAL}
    class MyModelAdmin(admin.ModelAdmin):
        inlines = [RelatedModelInline], MyModelAdmin)

The problem is that after clicking "Add another Related Model" more than once in the admin, the default value for the radio button (i.e. 'blue' checked) is not preserved. What's happening is that when the hidden inline form template is cloned the first time, it loses that default value. The first clone does get the default value, but every subsequent clone doesn't have it because the template has lost it during the first cloning.

I narrowed it down to the following lines in inlines.js:

    var template = $("#" + options.prefix + "-empty");
    var row = template.clone(true);
        .attr("id", options.prefix + "-" + nextIndex)

As soon as the first clone is inserted into the DOM, the template loses the default value. Really weird. Now what's even weirder is that the following simple test case does work, however:

    <html xmlns="" xml:lang="en" lang="en">
            .empty-form {
    <script type="text/javascript" src="jquery.js"></script>
    <form id="original-form" class="empty-form" action="" method="post">
        <input type="radio" name="radio-test" value="I'm a checked radio button" checked="checked" />
        <input type="radio" name="radio-test" value="I'm another checked radio button" />
    <a href="#" alt="" id="clone-form">Clone</a>
    <script type="text/javascript" language="Javascript">
        $(document).ready(function() {
            var counter = 0;
                counter += 1;
                var template = $('#original-form');
                var row = template.clone(true);
    				    .attr("id", 'clone-' + counter)

The code above tries to match the Django inline jquery business as close as possible (e.g. using same jquery.js), but the cloning here is working perfectly... So my guess is that there must be some strange side effects happening in inlines.js or in other javascript code loaded in the admin.

A related issue has been wontfixed for jquery itself:
The issue observed here is slightly different though, as it is the cloned object that loses the default value, not the clonee.

Anyway, it's hard to figure out whether it is a Django or jQuery issue at this stage.

Attachments (1)

14830_inlines_radio_buttons_r15048.diff (6.1 KB) - added by Julien Phalip 10 years ago.

Download all attachments as: .zip

Change History (9)

comment:1 Changed 10 years ago by Julien Phalip

milestone: 1.3

Marking 1.3 as recommended by DrMeers on IRC, since this is a bug.

comment:2 Changed 10 years ago by Russell Keith-Magee

Triage Stage: UnreviewedAccepted

I can validate that I've seen this with my own two eyes; but I'm not sure how to fix it either.

comment:3 Changed 10 years ago by antoinemartin

The issue comes from the fact that when the row is inserted, the radio elements have the name as in the template. As only one radio element with the same name can be checked, the browser "unchecks" the radio in the template.

To fix this, simply move the addition of the new form in the document DOM after having changed the names and ids in the template:

	      .attr("id", options.prefix + "-" + nextIndex)
          // Remove insertion from here
	  //    .insertBefore($(template));


        row.find("input,select,textarea,label,a").each(function() {
		updateElementIndex(this, options.prefix, totalForms.val());
        // Insert the new form when it has been fully edited
	// Update number of total forms
	$(totalForms).val(nextIndex + 1);

comment:4 Changed 10 years ago by Julien Phalip

Has patch: set

Well spotted, antoinemartin! Your suggestion fixes the problem, thanks! Patch attached.

Changed 10 years ago by Julien Phalip

comment:5 Changed 10 years ago by Julien Phalip

Triage Stage: AcceptedReady for checkin

Even though this is not recommended practice, I'm taking the liberty to RFC my own patch to be sure this annoying bug grabs the attention of core devs before 1.3 ships ;-)

comment:6 Changed 10 years ago by Russell Keith-Magee

Resolution: fixed
Status: newclosed

In [15420]:

Fixed #14830 -- Ensure that radio buttons on inlines preserve their default value. Thanks to Julien Phalip for the report and patch, and to antoinemartin for the diagnosis.

comment:7 Changed 10 years ago by Russell Keith-Magee

In [15421]:

[1.2.X] Fixed #14830 -- Ensure that radio buttons on inlines preserve their default value. Thanks to Julien Phalip for the report and patch, and to antoinemartin for the diagnosis.

Backport of r15420 from trunk.

comment:8 Changed 10 years ago by Jacob

milestone: 1.3

Milestone 1.3 deleted

Note: See TracTickets for help on using tickets.
Back to Top