удаление изображения с использованием модального идентификатора - PullRequest
Новая
       2

удаление изображения с использованием модального идентификатора

0 голосов
/ 14 апреля 2019

У меня есть модал, который показывает фотографии пользователя, и в этом модале, в котором есть фотография, есть значок корзины для пользователя, чтобы удалить фотографию, и как только он щелкает по корзине, появляется другой модал, спрашивающий, является ли он уверен, что он хочет удалить фотографию. И подтверждение фото удалено. проблема в том, что вы всегда удаляете первую фотографию, вы не удаляете фотографию, которая находится в модальном. если я идентифицирую любую фотографию в центре галереи и щелкаю, эта фотография открывается в модале, фотографию, которую я выбрал, но при попытке удаления всегда удаляйте первую фотографию галереи

modalgallery.js 

    $(function() {
        $('.pop').on('click', function() {
            $('.imagepreview').attr('src', $(this).attr('data-img-url'));
            $('#imagemodal').modal('show');   
        });     
    });

modalconfirmedelete.js 

    $(function() {
        $('.pop2').on('click', function() {

            $('#delete').modal('show');   

        });     
    });

views.py 

def delete(request, id):
    photos = Photo.objects.get(id=id)
    photos.delete()
    return redirect('sistema_perfil')

def perfil(request):
    photos_list =  Photo.objects.filter(user=request.user.pk)
    usuario = Usuario.objects.all()
    form = UsuarioForm()
    data = {'usuario': usuario, 'form': form, 'photos': photos_list}
    return render(request, 'perfil.html', data)

perfil.html 

     {% for photo in photos %}

              <a class="pop" href="#"  data-img-url="{{ photo.file.large.url}}"><img src="{{ photo.file.medium.url}}"class="img-thumbnail" width="200" height="200"> </a>

              <!-- Modal Gallery-->
        <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                    <div class="modal-content">              
                    <div class="modal-body">
                          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">X</span></button>
                          <img src="{{ photo.file.large.url}}" class="imagepreview" style="width: 100%;" >
                          <a class="pop2" href="{% url 'delete' photo.id %}" ><img src="{% static 'svg/delete.svg' %}" width="20" height="20" alt="">Deletar </a>

                    </div>
                    </div>
                    </div>
              </div>

              <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                    <div class="modal-content">              
                    <div class="modal-body">
                          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">X</span></button>

                                      <h2>Tem certeza que deseja deletar essa foto: </h2>
                                      <a href="{% url 'delete' photo.id %}" type="button" class="btn bg-danger text-white js-upload-photos">
                                                  <span class="glyphicon glyphicon-cloud-upload"></span> Deletar
                                            </a>


                    </div>
                    </div>
                    </div>
              </div>


        {% endfor %}

1 Ответ

1 голос
/ 14 апреля 2019

Атрибут id ваших модалов удаления не является уникальным, поэтому $('#delete') всегда ссылается на один и тот же модал.

Вы можете создать уникальные идентификаторы для своих моделей и добавить атрибут данных в свой .pop2 кнопкаЧто-то вроде этого должно работать:

perfil.html 

{% for photo in photos %}

    ...
    <a class="pop2" data-target="delete-{{ for.counter }}" href="{% url 'delete' photo.id %}" >
    ...
    <div class="modal fade" id="delete-{{ for.counter }}">
    ...

modalconfirmedelete.js 

$(function() {
    $('.pop2').on('click', function() {

        $($(event.delegateTarget).data('target')).modal('show');   

    });     
});

С другой стороны, я настоятельно рекомендую изменить ваш delete просмотр только для удаления на POST запросах:

views.py 

def delete(request, id):
    if request.method != 'POST':
        return HttpResponseNotAllowed(['POST'])
    photos = Photo.objects.get(id=id)
    photos.delete()
    return redirect('sistema_perfil')

Вместо <a href="{% url 'delete' photo.id %}" вы бы использовали форму и кнопку:

perfil.html 

<form action="{% url 'delete' photo.id %}" method="POST">
{% csrf_token %}
<submit class="btn bg-danger">...
...