I cannot delete the correct image by passing id through jQuery via Modal

Question

I have a system that you click on the image and it opens it larger via modal, below has a Delete button, if you click Delete, opens another modal asking if you are sure you want to delete this image, just confirming the second modal that it is deleted.

However it is always deleting the first photo I sent to the gallery, I am not able to pass the correct ID via the modal.

I’m using Django for the system and Pyhton.

I’d appreciate a little help.

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 views.

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)

html profile.

     {% 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 %}

Answer 1

It is because you are repeating the id’s and your code will always get the first one. An id should be unique on the page.

You can solve this by converting id’s into classes:

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

and

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

And change the selectors in jQuery to open the correct modals using the 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');   
   });     
});