#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 |
Description
Here is a simple test case illustrating the problem:
Models:
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')
Admin:
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]
admin.site.register(MyModel, 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);
row.removeClass(options.emptyCssClass)
.addClass(options.formCssClass)
.attr("id", options.prefix + "-" + nextIndex)
.insertBefore($(template));
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="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
.empty-form {
display:none;
}
</style>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<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" />
</form>
<a href="#" alt="" id="clone-form">Clone</a>
<script type="text/javascript" language="Javascript">
$(document).ready(function() {
var counter = 0;
$('#clone-form').click(function(){
counter += 1;
var template = $('#original-form');
var row = template.clone(true);
row.removeClass('empty-form')
.addClass('cloned-form')
.attr("id", 'clone-' + counter)
.insertBefore($(template));
});
});
</script>
</body>
</html>
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: http://bugs.jquery.com/ticket/3879
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)
Change History (9)
comment:1 by , 13 years ago
| milestone: | → 1.3 |
|---|
comment:2 by , 13 years ago
| Triage Stage: | Unreviewed → Accepted |
|---|
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 by , 13 years ago
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:
row.removeClass(options.emptyCssClass)
.addClass(options.formCssClass)
.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
row.insertBefore($(template));
// Update number of total forms
$(totalForms).val(nextIndex + 1);
comment:4 by , 13 years ago
| Has patch: | set |
|---|
Well spotted, antoinemartin! Your suggestion fixes the problem, thanks! Patch attached.
by , 13 years ago
| Attachment: | 14830_inlines_radio_buttons_r15048.diff added |
|---|
comment:5 by , 13 years ago
| Triage Stage: | Accepted → Ready 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 ;-)
Marking 1.3 as recommended by DrMeers on IRC, since this is a bug.