时间戳

首页 > 解决方案 > 使用模态ID删除图像

django - 使用模态ID删除图像

问题描述

我有一个显示用户照片的模态，在那个有照片的模态中有一个垃圾桶图标，用户可以删除照片，一旦他点击垃圾桶，就会出现另一个模态，询问他是否确定他想要删除照片。并确认照片已删除。问题是您总是删除第一张照片，而不是删除模态中的照片。如果我在画廊中间的任何照片中找到并单击，这张照片会在模态中打开，我选择的照片，但是在尝试删除时，总是删除画廊的第一张照片

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

        });     
    });

视图.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 %}

标签： djangobootstrap-modal

解决方案

你的删除模式的id属性不是唯一的，所以$('#delete')总是指同一个模式。

您可以为您的模型创建唯一的 id，并为您的.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请求执行删除：

视图.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">...

推荐阅读