在 Ajax 请求中刷新 Data Div

Question

我正在尝试使用具有两个选项的下拉菜单创建个人资料图片编辑器：

1. 更新您的头像

2. 如果有任何个人资料图片，它将显示删除选项，否则它将隐藏此选项

模板代码：

<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);
            }
        }
    });
});

但我面临一个问题：即使我点击 delete 选项，下拉菜单也不会刷新，它仍然显示删除它的选项。只有在我刷新页面时才会出现。

同样的方式，如果没有个人资料图片，它只会显示上传个人资料图片。如果我更新图像，下拉菜单不会显示删除选项。要看到这一点，我需要刷新页面。

如何避免页面重新加载刷新下拉内容？

Answer 1

我了解您的问题。您可以在 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 处理显示或隐藏下拉列表，方法是首先检查个人资料图片是否已更新，如果有则显示删除按钮，否则隐藏删除按钮，当用户更新个人资料图片时显示删除按钮。