动态添加表单一个Django表单集与阿贾克斯 [英] Dynamically adding a form to a Django formset with Ajax
问题描述
我要自动添加新的形式,以一个Django表单集中使用Ajax,这样当用户点击它运行的JavaScript,增加了一个新的形式(也就是表单集的一部分)在网页添加按钮。
I want to automatically add new forms to a Django formset using Ajax, so that when the user clicks an "add" button it runs JavaScript that adds a new form (which is part of the formset) to the page.
推荐答案
这是我如何做到这一点,使用 jQuery的:
This is how I do it, using jQuery:
我的模板:
<h3>My Services</h3>
{{ serviceFormset.management_form }}
{% for form in serviceFormset.forms %}
<div class='table'>
<table class='no_error'>
{{ form.as_table }}
</table>
</div>
{% endfor %}
<input type="button" value="Add More" id="add_more">
<script>
$('#add_more').click(function() {
cloneMore('div.table:last', 'service');
});
</script>
在javascript文件:
In a javascript file:
function cloneMore(selector, type) {
var newElement = $(selector).clone(true);
var total = $('#id_' + type + '-TOTAL_FORMS').val();
newElement.find(':input').each(function() {
var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
var id = 'id_' + name;
$(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
});
newElement.find('label').each(function() {
var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
$(this).attr('for', newFor);
});
total++;
$('#id_' + type + '-TOTAL_FORMS').val(total);
$(selector).after(newElement);
}
它是什么:
cloneMore
接受选择
作为第一个参数,而键入
。什么选择
应该做的是通过它它应该重复。在这种情况下,我将它传递 div.table:最后
这样的jQuery查找表的最后一类表中的
。该:它的最后一个
部分是很重要的,因为选择
也可用于确定哪些新的形式会后插入。更可能你会希望它在的形式,其余的结束。该键入
的说法是这样我们就可以更新 management_form
字段,特别是 TOTAL_FORMS
,以及实际的表单字段。如果你有一个表单集满了,比方说,客户端
模式,管理领域将有标识 id_clients-TOTAL_FORMS
和 id_clients-INITIAL_FORMS
,而表单域将在 id_clients-N-字段名的格式
与<$ C $ ç> N 是表格编号,从 0
。所以,使用键入
参数的 cloneMore
函数着眼于如何多种形式当前有,并经过每个输入和标签新的形式取代所有字段名内部/ IDS从像 id_clients-(N)-name
到 id_clients-(N + 1)-name
等。它完成后,它会更新 TOTAL_FORMS
字段,以反映新的形式,并将其添加到集的末尾。
cloneMore
accepts selector
as the first argument, and the type
of formset as the 2nd one. What the selector
should do is pass it what it should duplicate. In this case, I pass it div.table:last
so that jQuery looks for the last table with a class of table
. The :last
part of it is important because the selector
is also used to determine what the new form will be inserted after. More than likely you'd want it at the end of the rest of the forms. The type
argument is so that we can update the management_form
field, notably TOTAL_FORMS
, as well as the actual form fields. If you have a formset full of, say, Client
models, the management fields will have IDs of id_clients-TOTAL_FORMS
and id_clients-INITIAL_FORMS
, while the form fields will be in a format of id_clients-N-fieldname
with N
being the form number, starting with 0
. So with the type
argument the cloneMore
function looks at how many forms there currently are, and goes through every input and label inside the new form replacing all the field names/ids from something like id_clients-(N)-name
to id_clients-(N+1)-name
and so on. After it is finished, it updates the TOTAL_FORMS
field to reflect the new form and adds it to the end of the set.
这功能特别有帮助我,因为事情是这样的设置它可以让我在整个应用程序中使用它时,我想提供更多形式的一个formset,并没有让我需要有一个隐藏的模板形式,只要我将它传递的表单集名称,其中形式布局的格式复制。希望它能帮助。
This function is particularly helpful to me because the way it is setup it allows me to use it throughout the app when I want to provide more forms in a formset, and doesn't make me need to have a hidden "template" form to duplicate as long as I pass it the formset name and the format in which the forms are laid out. Hope it helps.
这篇关于动态添加表单一个Django表单集与阿贾克斯的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!