1

Tenho um sistema que você clica na imagem e ele abre ela maior via modal, embaixo tem um botão de Deletar, se clicar em Deletar, abre outro modal perguntando se você tem certeza que quer deletar essa imagem, só confirmando o segundo modal que ela é deletada.

Porém está sempre deletando a primeira foto que mandei para a galeria, não estou conseguindo passar o ID correto via o modal.

Estou usando Django para o sistema e Pyhton.

Agradeceria uma ajuda.

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="#" ><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 %}
7
  • Vc está repetindo id's no laço. Id's devem ser únicas na página.
    – Meu ovo
    16/04/2019 às 16:10
  • onde amigo? acho que nao entendi 16/04/2019 às 16:14
  • Esse id="imagemodal" e esse id="delete"
    – Meu ovo
    16/04/2019 às 16:19
  • coloquei abos para imagemodal, mas dai ele nao carrega nenhum dos dois 16/04/2019 às 16:22
  • Acho que vc não entendeu rs... não pode repetir o mesmo id na página. Um id deve ser único. Por exemplo, vc não pode ter duas divs com o mesmo id. É como um CPF, cada pessoa tem um diferente.
    – Meu ovo
    16/04/2019 às 16:24

1 Resposta 1

1

É porque está repetindo as id's e seu código irá pegar sempre a primeira. Uma id deve ser única na página.

Você pode resolver isso convertendo as id's em classes:

<div class="modal fade imagemodal" tabindex="-1"...

e

<div class="modal fade delete" tabindex="-1"...

E alterar os seletores no jQuery para abrir as modais corretas utilizando as classes:

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

$(function() {
   $('.pop2').on('click', function() {
      $(this).closest(".imagemodal").next(".delete").modal('show');   
   });     
});
1
  • não tenho nem como agradecer você, perfeito, fora a aula que me deu via chat, tu é o cara 17/04/2019 às 15:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .