Обновление Div данных внутри Ajax запроса - PullRequest
Новая
       1

Обновление Div данных внутри Ajax запроса

0 голосов
/ 01 марта 2020

Я пытаюсь создать редактор изображений профиля с выпадающим списком, имеющим две опции:

  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 , раскрывающийся список не обновляется и все равно показывает возможность его удаления. Это происходит только после того, как я обновлю sh страницу.

Точно так же, если нет изображения профиля, отображается только профиль загрузки pi c. Если я обновлю изображение, выпадающий список не будет отображать опцию удаления. Чтобы увидеть это, мне нужно обновить sh страницу.

Как избежать перезагрузки страницы, чтобы обновить sh выпадающее содержимое?

1 Ответ

1 голос
/ 01 марта 2020

Я понимаю вашу проблему. Вы можете легко решить эту проблему при ajax успешном вызове.

Вам нужно просто скрыть и показать, используя jquery или javascript.

Допустим, пользователь уже сказал имеет профиль pi c, и пользователь нажимает на опцию удаления, и 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);
            }
        }
    });
});

Для другого случая, когда нет профиля pi c и пользователь обновляет профиль pi c затем вы должны создать выпадающее меню и добавить его в выпадающий список. 

$("#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, проверив сначала, если профиль pi c обновляется, если отображается кнопка удаления, иначе скрывается кнопка удаления, а когда пользователь обновляет профиль pi c, отображается кнопка удаления.

...