I'm a bit of a newbie when it comes to django, ajax, and jquery, so i apologize ahead of time if my question comes off being trivial.
当谈到django,ajax和jquery时,我有点新手,所以如果我的问题变得微不足道,我会提前道歉。
I've been scratching my head on this one for some time now, but I am trying to use ajax and jquery to submit a Django ModelForm form via a modal dialog window provide by jQuery UI. The problem I am having is that it seems that the form data isn't being passed into the request or that my form object in my views.py file is having a problem parsing the reqest.POST object. Regardless when I submit my form, the form.is_valid() fails and reviewing the form errors I get a "This field is required" for every input of the form. So not sure what I am doing wrong, the form in question worked prior to me trying to "modal"ize it with ajax.
我一直在讨论这个问题已经有一段时间了,但是我试图使用ajax和jquery通过jQuery UI提供的模态对话框窗口提交Django ModelForm表单。我遇到的问题是,似乎表单数据没有传递给请求,或者我的views.py文件中的表单对象在解析reqest.POST对象时遇到问题。无论我何时提交表单,form.is_valid()都会失败并查看表单错误,我会在表单的每个输入中获得“此字段是必需的”。所以不确定我做错了什么,在我尝试使用ajax“模态化”它之前,有问题的形式有效。
here's my code, maybe a more seasoned eye can see what I missed.
这是我的代码,也许一个更有经验的眼睛可以看到我错过了什么。
forms.py
from django.forms import ModelForm
from artists.views import Artist
class RegistrationForm(ModelForm):
username = forms.CharField(label=(u'User Name'))
first_name = forms.CharField(label=(u'First Name'))
last_name = forms.CharField(label=(u'Last Name'))
email = forms.EmailField(label=(u'Email'))
password = forms.CharField(label=(u'Password'),
widget=forms.PasswordInput(render_value=False))
password = forms.CharField(label=(u'Verify Password'),
widget=forms.PasswordInput(render_value=False))
class Meta:
model = Artist
exlude = (user, slug, work_email)
views.py
from django.http import HttpResponse
from django.contrib.auth.models import User
from django.shortcut import render
from django.template.defaultfilters import slugify
from django.utils.functional import Promise
from django.utils.encoding import force_text
from django.shortcuts import render
from artists.forms import RegistrationForm
from artists.models import Artist
import json
class LazyEncoder(json.JSONEncoder):
def default(self, obj):
if isinstance(obj, Promise):
return force_text(obj)
return super(LazyEncoder, self).default(obj)
def ValidateEmail(email):
from django.core.validators import validate_email
from django.core.exception import ValidationError
try:
validate_email(email)
return True
except ValidationError:
return False
def ArtistRegistration(request):
form = False
if request.method == 'POST' and request.is_ajax():
form = RegistrationForm(request.POST)
if form.is_Valid():
is_valid = True
username = form.cleaned_data['username']
password = form.cleaned_data['password']
password1 = form.cleaned_data['password1']
email = form.cleaned_data['email']
first_name = form.cleaned_data['first_name'].title()
last_name = form.cleaned_data['last_name'].title()
if ValidateEmail(email) is False:
is_valid = False
message = "Email entry is invalid."
if User.objects.filter(username=username).exists():
is_valid = False
message = "Username already exists."
if password != password1:
is_valid = False
message = "Passwords do not match."
if is_valid is False:
response_dict = {"type": "error"}
response_dict["message"] = message
result = json.dumps(response_dict, cls=LazyEncoder)
return HttpResponse(result, mimetype='application/json')
else:
user = User.objects.create_user)
username = username,
email = email,
password = password,
first_name = first_name,
last_name = last_name_
user.save()
artist = Artist(
user = user,
first_name = first_name,
last_name = last_name,
work_email = email,
slug = slugify('%s %s' % (first_name, last_name)),
department=form.cleaned_data['department'])
artist.save()
response_dict = {'status':1, 'type':'success'}
result = json.dumps(response_dict, cls=LazyEncoder)
return HttpResponse(result, mimetype='application/json')
else:
response_dict = {'type': 'error'}
response_dict['message'] = 'form is invalid'
response_dict['errors'] = json.dumps(form.errors)
result = json.dumps(response_dict, cls=LazyEncoder)
return HttpResponse(result, mimetype='application/json')
else:
form = RegistrationForm()
context = {'form' : form}
return render(request, 'register-modal.html', context)
here is the html that my modal dialog calls: register-modal.html
这是我的模态对话框调用的html:register-modal.html
<form action="{% url 'modal_registration' %}" method="post" id="register_form" name="register_form">
{% csrf_token %}
<table>
<tbody>
<tr>
<th><label for="first_name">First Name:</label></th>
<td>{{ form.first_name }}</td>
</tr>
<tr>
<th><label for="last_name">Last Name:</label></th>
<td>{{ form.last_name }}</td>
</tr>
<tr>
<th><label for="email">Email:</label></th>
<td>{{ form.email }}</td>
</tr>
<tr>
<th><label for="username">Username:</label></th>
<td>{{ form.username }}</td>
</tr>
<tr>
<th><label for="password">Password:</label></th>
<td>{{ form.password }}</td>
</tr>
<tr>
<th><label for="password1">Verify Pswd:</label></th>
<td>{{ form.password1 }}</td>
</tr>
<tr>
<th><label for="department">Department:</label></th>
<td>{{ form.department }}</td>
</tr>
</tbody>
</table>
</form>
<span id="registration_error" name="registration_error" style="color: #FF0000;"></span>
Finally here is the js file that makes all the jquery and ajax calls. I've omitted the csrf part because its copied verbatim from the Django docs.
最后这里是js文件,它生成所有jquery和ajax调用。我省略了csrf部分,因为它是从Django文档中逐字复制的。
register.js
$(document).ready(function () {
$.ajaxSetup({traditional: true});
var $register_dialog = $('#modal_register_div').dialog({
autoOpen: false,
title: "User Registration",
closeOnEscape: true,
draggable: false,
resizable: false,
modal: true,
width: 450,
buttons: {
"Register": function () {
var $this = $(this);
var frm = document.form['register_form'];
$.ajax({
type: frm.method,
url: frm.action,
data: $('#register_form').serialize(),
contentType: "application/json;charset=utf-8",
dataType: 'json',
success: function(response){
if(response['type'] == 'success') {
//any extra success functionality goes here
$this.dialog("close");
} else {
$("#registration_error").html(response['message']);
console.log(response['errors']);
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + '\n' + xhr.status + '\n' + ajaxOptions)
}
});
return false;
}
}
});
$('#register_artist').live("click", function () {
$.ajax({
type: 'get',
dataType: 'html',
url: '/register/'
data: {},
success: function(response){
$register_dialog.empty().html(response).dialog('open');
}
});
});
});
the modal dialog is tied to a hidden div on the base template page for my django page, and the js script is loaded on the same page. the dialog is called by clicking on a null href link. anyrate, if anyone can see what I am doing wrong, your input would truly be appreciated.
模态对话框绑定到我的django页面的基本模板页面上的隐藏div,并且js脚本加载在同一页面上。通过单击null href链接调用该对话框。任何人,如果有人能看到我做错了什么,你的意见真的会受到赞赏。
Thanks!
1 个解决方案
#1
4
Figured out what my folly was. In my ajax call I was defining my content type as: contentType: 'application/json;charset=utf-8'
弄清楚我的愚蠢行为。在我的ajax调用中,我将我的内容类型定义为:contentType:'application / json; charset = utf-8'
when it should have been the following: contentType: 'application/x-www-form-urlencoded;charset=utf-8'
它应该是以下内容:contentType:'application / x-www-form-urlencoded; charset = utf-8'
I realized after looking at the header data of my login form which was working compared to my register form, was that in my login form the data was being passed onto the request via "Form_Data" whereas my register form was being passed on as a "Request_Payload". After making the change, everything worked like a charm.
我看到登录表单的标题数据与我的注册表单相比后,我意识到,在我的登录表单中,数据是通过“Form_Data”传递给请求的,而我的注册表单是作为“ Request_Payload”。在做出改变之后,一切都像魅力一样。
#1
4
Figured out what my folly was. In my ajax call I was defining my content type as: contentType: 'application/json;charset=utf-8'
弄清楚我的愚蠢行为。在我的ajax调用中,我将我的内容类型定义为:contentType:'application / json; charset = utf-8'
when it should have been the following: contentType: 'application/x-www-form-urlencoded;charset=utf-8'
它应该是以下内容:contentType:'application / x-www-form-urlencoded; charset = utf-8'
I realized after looking at the header data of my login form which was working compared to my register form, was that in my login form the data was being passed onto the request via "Form_Data" whereas my register form was being passed on as a "Request_Payload". After making the change, everything worked like a charm.
我看到登录表单的标题数据与我的注册表单相比后,我意识到,在我的登录表单中,数据是通过“Form_Data”传递给请求的,而我的注册表单是作为“ Request_Payload”。在做出改变之后,一切都像魅力一样。