Reference a confirmation window from forloop

Question

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!!

Does this answer your question? [behavior of javascript getElementById() when there are elements with duplicate IDs in HTML DOM?](https://stackoverflow.com/questions/11528731/behavior-of-javascript-getelementbyid-when-there-are-elements-with-duplicate-i) — Abdul Aziz Barkat, Mar 06 '22 at 14:42

score 1 · Answer 1 · answered Mar 06 '22 at 15:48

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>

Reference a confirmation window from forloop

1 Answers1