我正在尝试创建一个带有两个选项的下拉菜单的个人资料图片编辑器:
更新您的个人资料图片
如果有个人资料图片,它将显示“删除”选项,否则将隐藏此选项
模板代码:
<div class="dropdown-menu">
<a class="dropdown-item"><input name="input_file" type="file" id="profile-pic-upload" style="display: none;" />
<label for="profile-pic-upload">Upload Profile Picture</label>
</a>
{% if user_profile.profile_pic %}
<a class="dropdown-item delete" href="javascript:" style="font-size : 14px;">Delete</a>
{% endif %}
</div>
JS代码:
$(".delete").click(function () {
$('.loading').show();
var url = "{% url 'user-profile-image-delete' %}";
$.ajax({
type: 'POST',
url: url,
data: $("#new_form").serialize(),
cache: false,
success: function (data, status) {
$('#imagePreview').css('background-image', 'url('+'{% static 'assets/img/user-64x.png' %}'+')');
if (data['status'] == "success") {
}
else {
toastr.error(data.msg);
}
}
});
});
$("#profile-pic-upload").change(function () {
var input_detail = this;
var data = new FormData();
var file = this.files[0];
data.append("file", file);
$.ajax({
type: 'POST',
data: data,
contentType: false,
processData: false,
url: $("#profile-file-upload").data('action'),
cache: false,
success: function (data, status) {
if (data['status'] == true) {
toastr.success(data.msg);
var randomId = new Date().getTime();
$('#imagePreview').css('background-image', 'url(' + data.profile_pic + '?random=' + randomId + ')');
}
else {
toastr.error(data.msg);
}
}
});
});
但是我面临一个问题:即使单击删除选项,下拉列表也不会刷新,并且仍然显示用于删除它的选项。仅在刷新页面后才能执行。
如果没有个人资料图片,则仅显示“上传个人资料”图片。如果我更新图像,则下拉列表将不会显示删除选项。要查看此内容,我需要刷新页面。
如何避免页面重新加载以刷新下拉菜单内容?
最佳答案
我了解您的问题。您可以在ajax调用成功中轻松解决此问题。
您需要做的只是使用jquery或javascript进行简单的隐藏和显示。
假设用户已经有一个个人资料照片,并且该人单击删除选项,并且ajax调用成功,那么您应该隐藏删除选项。 (您也可以将其删除,但是稍后您将必须通过javascript创建它)
$(".delete").click(function () {
$('.loading').show();
var url = "{% url 'user-profile-image-delete' %}";
$.ajax({
type: 'POST',
url: url,
data: $("#new_form").serialize(),
cache: false,
success: function (data, status) {
$('#imagePreview').css('background-image', 'url('+'{% static 'assets/img/user-64x.png' %}'+')');
if (data['status'] == "success") {
//$(".delete").hide(); // this will hide your delete option
//Instead of hiding we are now removing the button then generating the button dynamically via javascript.
$(".delete").remove();
// But note one thing if we use class then it will hide/delete all elements with class of delete. so it's better to use id for unique elements.
}
else {
toastr.error(data.msg);
}
}
});
});
对于没有个人资料图片且用户更新个人资料图片的其他情况,则应创建一个下拉菜单并将其附加到下拉菜单中。
$("#profile-pic-upload").change(function () {
var input_detail = this;
var data = new FormData();
var file = this.files[0];
data.append("file", file);
$.ajax({
type: 'POST',
data: data,
contentType: false,
processData: false,
url: $("#profile-file-upload").data('action'),
cache: false,
success: function (data, status) {
if (data['status'] == true) {
toastr.success(data.msg);
$(".delete").remove();
let dropdown_menu_item = '<a class="dropdown-item delete" href="javascript:" style="font-size : 14px;">Delete</a>'
$('.dropdown-menu').append(dropdown_menu_item);
var randomId = new Date().getTime();
$('#imagePreview').css('background-image', 'url(' + data.profile_pic + '?random=' + randomId + ')');
}
else {
toastr.error(data.msg);
}
}
});
});
这应该可以,但是我认为您应该通过以下方法使用javascript处理显示或隐藏下拉菜单:首先检查个人资料图片是否已更新,然后显示删除按钮,否则隐藏删除按钮,当用户更新个人资料图片时再显示删除按钮。
关于javascript - 在Ajax请求中刷新Data Div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/60472949/