He estado tratando de crear una superposición de confirmación de eliminación emergente desde un forloop. No puedo hacer que funcione o definir qué ID o cómo pasar identificadores para la superposición.
Obtuve esto, pero solo se refiere al primer elemento del ciclo. Intenté serializar los identificadores con el elemento pk (myNavRef{{ref.pk}}), pero no funciona
{% for ref in perf_bim.referenciapredio_set.all %} <tr> <th scope="row">{{ forloop.counter }}</th> <th>{{ref.rol_fk.rol}}</th> <th>{{ref.rol_fk.dir}}</th> <td><a href="{% url 'det_ref_pr' ref.pk %}"><img src="{% static 'arrow.png' %}" height=20 alt=""></a></td> <td><button onclick="openNavRef()" type="button" class="btn btn-outline-dark btn-sm"><img src="{% static 'trash.svg' %}" alt="" height=15 ></button><br></td> </tr> <div id="myNavRef" class="overlay"> <div class="fontformat"style="padding-top:250px;width:40%;margin:auto;"> <div class="overlay-content"> <a href="{% url 'borrar_ref' ref.pk %}"type="button "class="btn btn-warning btn-sm"style="color:black;">Eliminar Referncia de Predio Rol: {{ref.rol_fk.rol}}</a> <br> <a href="javascript:void(0)" type="button "class="btn btn-bright btn-sm" onclick="closeNavRef()">Cancelar</a> </div> </div> </div> {% endfor %} <script> function openNavRef() { document.getElementById("myNavRef").style.display = "block"; } function closeNavRef() { document.getElementById("myNavRef").style.display = "none"; } </script>¡¡Gracias!!
Si desea mostrar el div correspondiente, puede definir el div con una identificación unique . Luego puede mostrar el div correspondiente con la id proporcionada del elemento.
Primero configure su elemento div con una id única como
<div id="myNavRef{{ref.pk}}" class="overlay"> Luego, en su elemento de button , onclick clic en pasar la misma id que
<button onclick="openNavRef('{{ref.pk}}')" type="button" class="btn btn-outline-dark btn-sm">También para su botón de cierre como
<a href="javascript:void(0)" type="button "class="btn btn-bright btn-sm" onclick="closeNavRef('{{ref.pk}}')">Cancelar</a> Luego en tu javascript
<script> function openNavRef(id) { document.getElementById("myNavRef" + id).style.display = "block"; } function closeNavRef(id) { document.getElementById("myNavRef" + id).style.display = "none"; } </script>