python - 问题是用户配置文件更改表单在 Django 中始终有效
问题描述
我在模板中有两种不同形式的模型我用一种形式更改用户的照片并用另一种形式编辑用户的文本配置文件模型（配置文件）与主要 Django 用户是一对一的关系但我有一个用户照片更改表单的问题单击作为配置文件模型的用户配置文件编辑表单（用于文本更改）照片更改表单也被调用并且始终有效我的表单来自 Django 表单模型绝对主要问题是图片改表格，但是不知道是哪部分代码有问题。我使用 Ajax 将值发送到服务器。下面我将显示代码和输出以更容易地传达概念
如果您不明白我的问题，我可以向您解释更多，只需给我您的电子邮件地址，以便我与您联系。谢谢你。
看法
def edit_user_view(request, pk):
user = get_object_or_404(User, pk=pk)
c_default_user_edit_form = default_user_edit_form(
request.POST or None,
initial=vars(user),
instance=user
)
c_user_image_editing_form = user_image_editing_form(
request.POST or None,
request.FILES or None,
instance=user.profile
)
c_user_information_editing_form = user_information_editing_form(
request.POST or None,
initial=vars(user.profile),
instance=user.profile,
)
if c_default_user_edit_form.is_valid():
print("default user")
c_default_user_edit_form.save()
return JsonResponse({'s': 's'})
if c_user_information_editing_form.is_valid():
c_user_information_editing_form.save()
if c_user_image_editing_form.is_valid():
print("image user")
user.profile.save()
return JsonResponse({'src': user.profile.user_profile.url})
context = {
'default_user_edit_form': c_default_user_edit_form,
'user_image_editing_form': c_user_image_editing_form,
'user_information_editing_form': c_user_information_editing_form,
'editing_user': user,
}
return render(request, 'AdminPanel/Users/user-edit.html', context)
模型
class Profile(models.Model):
gender_selection_choices = [
('MS', 'زن'),
('MR', 'مرد'),
('TG', 'دیگر'),
]
user = models.OneToOneField(
User,
on_delete=models.CASCADE
)
user_profile = models.ImageField(
verbose_name="پروفایل",
upload_to=RenameUserPhoto,
validators=[ImageSizaValidators],
default='images/User/UserProfile/icon-avatar-default.png',
blank=True
)
gender_selection = models.CharField(
verbose_name='انتخاب جنسیت',
max_length=2,
blank=True,
default="NS",
choices=gender_selection_choices,
)
postal_code = models.CharField(
verbose_name='کد پستی',
max_length=20,
validators=[postal_code_validator],
blank=True,
help_text='کد پستی 10 رقمی میتواند شامل خط تیره (-) یا نباشد',
)
phone_number = models.CharField(
max_length=11,
verbose_name='شماره تماس',
help_text='شماره تماس باید 11 رقمی باشد و میتواند شامل صفر در ابتدای شماره نباشد',
blank=True,
validators=[phone_number_validator],
)
location_first = models.CharField(
max_length=250,
blank=True,
verbose_name="آدرس (1)"
)
NumberOfEmailsSentActivationLink = models.IntegerField(
blank=True,
default=0,
verbose_name="تعداد ایمیل ارسالی فعالسازی حساب کاربری"
)
NumberOfEmailsSentToTheUser = models.IntegerField(
blank=True,
default=0,
verbose_name="تعداد ایمیل های ارسال شده برای کاربر"
)
objects = CustomModelManagerProfile()
def get_absolute_url(self):
return reverse_lazy('AdminSite__Ak:edit_user_view', kwargs={
'pk': self.user.pk
})
形式
class user_information_editing_form(forms.ModelForm):
class Meta:
model = Profile
fields = (
'phone_number',
'postal_code',
'location_first',
'gender_selection',
)
widgets = {
'phone_number': forms.NumberInput(
attrs={
'class': 'form-control',
'placeholder': 'تلفن همراه را وارد نمایید...',
}),
'postal_code': forms.TextInput(attrs={
'class': 'form-control',
'placeholder': 'کد پستی را وارد نمایید...'
}),
'location_first': forms.Textarea(attrs={
'rows': 1,
'style': 'resize:none;height:2.7125rem',
'class': 'form-control',
'placeholder': 'آدرس خود را وارد نمایید...'
}),
'gender_selection': forms.Select(attrs={
'class': 'form-control'
})
}
class user_image_editing_form(forms.ModelForm):
class Meta:
model = Profile
fields = ('user_profile',)
widgets = {
'user_profile': forms.FileInput()
}
阿贾克斯
// Change User Photo
$('button.user-photo-change-btn').click(function () {
const image_input = $('input[name="user_profile"]').click()
let formData = new FormData();
image_input.change(function () {
let formData = new FormData();
formData.append('user_profile', $('form#form-change-photo input[name="user_profile"]').prop('files')[0])
formData.append('csrfmiddlewaretoken', $('form#form-change-photo input[name="csrfmiddlewaretoken"]').val())
jQuery.ajax({
url: location.href,
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function (Data) {
$('img.users-avatar-shadow').attr('src', Data.src)
}
});
})
})
//Account change information form
$('form#account_change_information_form button[type="button"]').click(function () {
$.ajax({
url: location.href,
data: $('form#account_change_information_form').serialize(),
type: 'POST',
cache:false,
success: function () {
}
})
})
html
{% extends 'AdminPanel/__Main__/base.html' %}
{% load static %}
<!--Title-->
{% block title_edit_user %}
ویرایش کاربر
{% endblock %}
<!-- BEGIN: Vendor CSS-->
{% block vendor_css_edit_user %}
<link rel="stylesheet" type="text/css"
href="{% static 'AdminPanel/app-assets/css-rtl/plugins/forms/validation/form-validation.css' %}">
<link rel="stylesheet" type="text/css"
href="{% static 'AdminPanel/app-assets/vendors/css/forms/select/select2.min.css' %}">
<link rel="stylesheet" type="text/css"
href="{% static 'AdminPanel/app-assets/vendors/css/pickers/pickadate/pickadate.css' %}">
{% endblock %}
<!-- END: Vendor CSS-->
<!-- BEGIN: Page CSS-->
{% block page_css_edit_user %}
<link rel="stylesheet" type="text/css" href="{% static 'AdminPanel/app-assets/css-rtl/pages/app-user.min.css' %}">
{% endblock %}
<!-- END: Page CSS-->
<!-- BEGIN: Content-->
{% block edit_user %}
<div class="app-content content">
<div class="content-overlay"></div>
<div class="header-navbar-shadow"></div>
<div class="content-wrapper">
<div class="content-header row">
</div>
<div class="content-body"><!-- users edit start -->
<section class="users-edit">
<div class="card">
<div class="card-content">
<div class="card-body">
<ul class="nav nav-tabs mb-3" role="tablist">
<li class="nav-item">
<a class="nav-link d-flex align-items-center active" id="account-tab"
data-toggle="tab" href="#account"
aria-controls="account" role="tab" aria-selected="true">
<i class="feather icon-user mr-25"></i><span
class="d-none d-sm-block">حساب</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" id="information-tab"
data-toggle="tab" href="#information"
aria-controls="information" role="tab" aria-selected="false">
<i class="feather icon-info mr-25"></i><span class="d-none d-sm-block">اطلاعات</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="account" aria-labelledby="account-tab"
role="tabpanel">
<!-- users edit media object start -->
<div class="media mb-2">
<a class="mr-2 my-25" href="#">
<img src="{{ editing_user.profile.user_profile.url }}" alt="users avatar"
class="users-avatar-shadow rounded" height="90" width="90">
</a>
<div class="media-body mt-50">
<h4 class="media-heading">{{ user.get_full_name }}</h4>
<div class="col-12 d-flex mt-1 px-0">
<form action="" method="post" id="form-change-photo"
class="form-inline" enctype="multipart/form-data">
{% csrf_token %}
{{ user_image_editing_form.user_profile }}
<button type="button"
class="btn btn-primary d-none d-sm-block mr-75 user-photo-change-btn">
تغییر دادن
</button>
<button type="button"
class="btn btn-outline-danger d-none d-sm-block user-photo-delete-btn">
پاک کردن
</button>
</form>
</div>
</div>
</div>
<!-- users edit media object ends -->
<!-- users edit account form start -->
<form novalidate method="post" id="form_default_user">
{% csrf_token %}
<div class="row">
<div class="col-12 col-sm-6">
<div class="form-group">
<div class="controls">
<label>پست الکترونیک</label>
{{ default_user_edit_form.username }}
</div>
</div>
<div class="form-group">
<div class="controls">
<label>نام</label>
{{ default_user_edit_form.first_name }}
</div>
</div>
<div class="form-group">
<div class="controls">
<label>نام خانوادگی</label>
{{ default_user_edit_form.last_name }}
</div>
</div>
</div>
{# User Permission #}
<div class="col-12 mt-2">
<div class="table-responsive border rounded px-1 ">
<h6 class="border-bottom py-1 mx-1 mb-0 font-medium-2"><i
class="feather icon-lock mr-50 "></i>وضعیت حساب کاربری
</h6>
<table class="table table-borderless">
<thead>
<tr>
<th>دسترسی های کاربر</th>
<th>فعال / غیرفعال</th>
<th>کاربر ویژه</th>
<th>کارمند</th>
</tr>
</thead>
<tbody>
<tr>
<td>کاربران</td>
<td>
<div class="custom-control custom-checkbox">
{{ default_user_edit_form.is_active }}
<label class="custom-control-label"
for="user-active"></label>
</div>
</td>
<td>
<div class="custom-control custom-checkbox">
{{ default_user_edit_form.is_superuser }}
<label class="custom-control-label"
for="user-superuser"></label>
</div>
</td>
<td>
<div class="custom-control custom-checkbox">
{{ default_user_edit_form.is_staff }}
<label class="custom-control-label"
for="user-personnel"></label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-12 d-flex flex-sm-row flex-column justify-content-end mt-1">
<button type="button"
class="btn btn-primary glow mb-1 mb-sm-0 mr-0 mr-sm-1"
id="btn-apply-default-user-changes">
ذخیره تغییرات
</button>
<button type="reset" class="btn btn-outline-warning">تنظیم مجدد
</button>
</div>
</div>
</form>
<!-- users edit account form ends -->
</div>
<div class="tab-pane" id="information" aria-labelledby="information-tab"
role="tabpanel">
<!-- users edit Info form start -->
<form method="post" novalidate id="account_change_information_form">
{% csrf_token %}
<div class="row mt-1">
<div class="col-12 col-sm-6">
<h5 class="mb-1"><i class="feather icon-user mr-25"></i>اطلاعات شخصی
</h5>
<div class="form-group">
<div class="controls">
<label for="">تلفن همراه</label>
{{ user_information_editing_form.phone_number }}
</div>
</div>
<div class="form-group">
<label>انتخاب جنسیت</label>
{{ user_information_editing_form.gender_selection }}
</div>
</div>
<div class="col-12 col-sm-6">
<h5 class="mb-1 mt-2 mt-sm-0"><i
class="feather icon-map-pin mr-25"></i>نشانی</h5>
<div class="form-group">
<div class="controls">
<label>آدرس</label>
{{ user_information_editing_form.location_first }}
</div>
</div>
<div class="form-group">
<div class="controls">
<label>کد پستی</label>
{{ user_information_editing_form.postal_code }}
</div>
</div>
</div>
<div class="col-12 d-flex flex-sm-row flex-column justify-content-end mt-1">
<button type="button"
class="btn btn-primary glow mb-1 mb-sm-0 mr-0 mr-sm-1"
id="Test">
ذخیره تغییرات
</button>
<button type="reset" class="btn btn-outline-warning">تنظیم مجدد
</button>
</div>
</div>
</form>
<!-- users edit Info form ends -->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- users edit ends -->
</div>
</div>
</div>
{% endblock %}
<!-- END: Content-->
<!-- BEGIN: Page Vendor JS-->
{% block page_vendor_js_edit_user %}
<script src="{% static 'AdminPanel/app-assets/vendors/js/forms/select/select2.full.min.js' %}"></script>
<script src="{% static 'AdminPanel/app-assets/vendors/js/forms/validation/jqBootstrapValidation.js' %}"></script>
<script src="{% static 'AdminPanel/app-assets/vendors/js/pickers/pickadate/picker.js' %}"></script>
<script src="{% static 'AdminPanel/app-assets/vendors/js/pickers/pickadate/picker.date.js' %}"></script>
{% endblock %}
<!-- END: Page Vendor JS-->
<!-- BEGIN: Page JS-->
{% block page_js_edit_user %}
<script src="{% static 'AdminPanel/app-assets/js/scripts/pages/app-user.min.js' %}"></script>
<script src="{% static 'AdminPanel/app-assets/js/scripts/navs/navs.min.js' %}"></script>
{% endblock %}
<!-- END: Page JS-->
解决方案
您的问题有一些方法，首先我建议ModelFormSet。您可以将模型表单集添加到另一个表单中，以减少冲突。另一种方法是在同一页面中的所有表单只有一个提交按钮。或者使用JS控制每个表单的提交，有一个submit()可用的功能，它也可以与serialize()功能混合。例如：
$("#form1_sub_btn").on('click', function(e){
e.preventDefault();
$.ajax({
url: url,
type: 'GET',
data: form1.serialize
success: function (res) {
console.log(res);
},
});
推荐阅读
- flutter - 试图从一个类中调用一个值
- recursion - 如何将目录路径的平面列表转换为 Rust 中的分层结构？
- android - 在真实设备中启动时签名的 apk 崩溃
- python - 调整 x 轴大小并保存信息
- reactjs - TS React 数据导入：“TS2322：类型 '{ data: { key1: string; }; }' 不可分配给类型 'IntrinsicAttributes & Props'。”
- c - 如何使用 dart ffi 为给定的 C 结构编写绑定？
- java - 使用for循环并行化函数
- javascript - 如何在 firestore 触发的函数中写入 firestore？
- django - 找不到 Django 模板 - 尝试了不同的位置
- feathersjs - 羽毛唯一的客户ID？