I've been trying to create a popup delete confirmation overlay from a forloop. I can't make it work or define which ids or how to pass identifiers for the overlay.
I got this, but it only refers the first element of the loop. I tried serialize the ids with the element pk (myNavRef{{ref.pk}}), but doesn't work
{% 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>
thanks!!
If you want to display the corresponding div then you can define the div with unique id. Then you can show corresponding div with the provided id of the element.
First set your div element with unique id as
<div id="myNavRef{{ref.pk}}" class="overlay">
Then on your button element onclick pass the same id as
<button onclick="openNavRef('{{ref.pk}}')" type="button" class="btn btn-outline-dark btn-sm">
Also for your close button as
<a href="javascript:void(0)" type="button "class="btn btn-bright btn-sm" onclick="closeNavRef('{{ref.pk}}')">Cancelar</a>
Then in your javascript
<script>
function openNavRef(id) {
document.getElementById("myNavRef" + id).style.display = "block";
}
function closeNavRef(id) {
document.getElementById("myNavRef" + id).style.display = "none";
}
</script>