用jquery/ajax更新django表单 [英] update a django form with jquery/ajax
问题描述
我想在下拉列表的change事件上更新表单.
I want to update a form on the change event of my drop down list.
这是我的观点:
from django.utils import simplejson
response_dic={}
#drop down list
actToValidateId=add_form.cleaned_data['actsToValidate'].pk
act=ActsIdsModel.objects.get(id=actToValidateId)
ids_form = ActsIdsForm(instance=act)
ids_form_dic={}
for field in ids_form.fields:
ids_form_dic[field]=getattr(act, field)
response_dic['ids_form']=ids_form_dic
response_dic['act']=dict([(attr, getattr(act, attr)) for attr in [f.name for f in act._meta.fields]])
return HttpResponse(simplejson.dumps(response_dic), mimetype="application/json")
这是JavaScript代码:
Here is the javascript code:
function display_act_ids(choice)
{
$form=$('#act_ids_form');
var form_data = $form.serialize();
$.ajax
({
url: $form.attr('action'),
type: 'POST',
dataType: 'json',
data: form_data,
success: function(result)
{
alert(result.ids_form.fileNoCelex);
}
});
//don't submit the form
return false;
}
现在,有两个问题:
1/如果我想为表单控件分配相应的值,则可以如下更新成功函数:
1/ If i want to assign the corresponding values to my form controls, I can update the success function as below:
$("#myfield").val(result.ids_form.myfield);
但是,如果我要填写很多字段怎么办?有自动执行此功能的功能吗?也许循环就可以了...
But what if I have many fields to fill? Is there a function to do that automatically? Maybe a loop would do...
2/我的主要问题:我在模板的很多地方(而不是在表单中)使用我的act实例(和其他变量).例如:
2/My main problem: I use my act instance (and other variables) in lots of places in my template (not in my form). For example:
{% if act.councilPath %}
<div class="row-fluid">{{ act.councilPath }}</div>
{% endif %}
以这种方式,不可能使用ajax.这意味着我必须重写我的模板才能正常工作.例如:
In such a way, it is impossible to use ajax. Which means I have to rewrite my template to have it work. For example:
<div id="council_path" class="row-fluid"></div>
在我的成功函数中:
$("#council_path").html(result.act.councilPath);
这将是很长的更新.有没有更好的方法,例如ajax发布并加载"?
This would be very long to update. Is there a better way to do, such as an ajax "post and load"?
请告诉我我是否不清楚.
Please tell me if I am not clear.
推荐答案
要使用jQuery/ajax更新django表单,这是我的方法... 三个关键点:将表单模板放在单独的html页面中,在视图中使用render_to_string并将html响应发送到ajax.
To update a django form with jquery/ajax, here is my method... Three key points: put your form template in a separate html page, use render_to_string in your view and send an html response to ajax.
index.html页面:
{% extends "base.html" %}
{% block content %}
<!-- you can put here everything that doesn't need to be updated (text, css inclusion, etc.) -->
<!-- act validation form -->
<form id="act_ids_form" class="form-inline" action="{% url act_ids %}" method="post">{% csrf_token %}
<!-- drop down list -->
<div id="actsToValidateChoice" class="fieldWrapper">
{{ add_form.actsToValidate.errors }}
{{ add_form.actsToValidate }}
</div>
<!-- div to update the part of the form that must be updated -->
<div id="act_ids_form_div">{% include form_template %}</div>
</form>
{% endblock %}
forms.py:
class ActsAddForm(forms.Form):
#drop down list
actsToValidate=forms.ModelChoiceField(queryset=ActsIdsModel.objects.filter(validated=0), empty_label="Select an act to validate", widget=forms.Select(attrs={'onchange': 'display_act_ids()'}))
form.html:
<!-- act ids form -->
<!-- put here everything that must be updated on the change of your drop down list -->
<div class="row-fluid">{{ ids_form.non_field_errors }}</div>
{% if act.councilPath %}
<div class="row-fluid"><a class="info_msg" href="{{act.councilPath}}" target="_blank">{{ displayName.councilPath }}</a></div>
{% endif %}
<table class="table table-bordered table-hover table-condensed span12">
<tr>
{% for field in ids_form %}
<td>
<div class="fieldWrapper">
{{ field.errors }}
{{ field }}
</div>
</td>
{% endfor %}
</tr>
</table>
urls.py:
from django.conf.urls import patterns, url
urlpatterns = patterns('actsIdsValidation.views',
url(r'^/?$', 'act_ids', name='act_ids'),
url(r'^form.html$', 'act_ids', name='act_ids'),
)
views.py:
def act_ids(request):
response_dic={}
#html page of the form
form_template='actsIdsValidation/form.html'
if request.method == 'POST':
#if drop down list not empty
if request.POST["actsToValidate"]!="":
#add form: contains the drop down list only
add_form = ActsAddForm(request.POST);
actToValidateId=request.POST["actsToValidate"].pk
act=ActsIdsModel.objects.get(id=actToValidateId)
ids_form = ActsIdsForm(instance=act)
response_dic['ids_form']=ids_form
response_dic['act']=act
return HttpResponse(render_to_string(form_template, response_dic, RequestContext(request)))
#GET
#unbound ids_form
response_dic['ids_form'] = ActsIdsForm()
response_dic['add_form'] = ActsAddForm()
response_dic['form_template'] = form_template
return render_to_response('actsIdsValidation/index.html', response_dic, context_instance=RequestContext(request))
Ajax调用:
function display_act_ids()
{
$form=$('#act_ids_form');
var datastring = $form.serialize();
$.ajax({
type: "POST",
url: $form.attr('action'),
dataType: 'html',
data: datastring,
success: function(result)
{
/* The div contains now the updated form */
$('#act_ids_form_div').html(result);
}
});
//don't submit the form
return false;
}
Voila!
这篇关于用jquery/ajax更新django表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!