jinja2 forLoop_no iteration in delete modal-CodePudding

I'm trying to build an app with Python Flask and connection with a MongoDB database. I have never worked with HTML/Jinja2, and I am finding some peculiar problem.

So, I want to display the list of my documents in a web page, show some document properties and have the possibility to delete the document.

Everything works fine, but for some reason the modal of the delete refer always to the first element of the list.

Here is the code of my html page:

<table >
<thead >
    <tr>
        <th>State</th>
        <th>Name</th>
        <th>Version</th>
        <th>Description</th>
        <th>Last Update</th>
        <th>Delete</th>
        <th>View</th>
        <th>Clone</th>
    </tr>
</thead>

<tbody>
    {% for doc in docs %}
    <tr>
        <td ><a href="./done?_id={{ doc['_id'] }}"><input type="image"
            src="static/images/recipe.png" width="30"></a></td>

        
        <td ><font size ="8"><em>{{ doc["clientId"] }}</em></font></td>

        <td ><strong>{{ doc["version"] }}</strong></td>

        <td ><strong>{{ doc["description"] }}</strong></td>

        <td ><strong>{{ doc["lastUpdate"] }}</strong></td>

        <td ><img src="{{ url_for('static',filename='images/trash.png') }}" , width="30" data-toggle="modal"
            data-target="#exampleModal" ) />{{ doc["_id"] }}</td>

        <td ><a href="./showRec?_id={{ doc['_id'] }}" target="_blank">
            <img src="{{ url_for('static',filename='images/view_n.png') }}" , width="30" ) /></a>
            
            </td>


        <td ><a href="./cloneRec?_id={{ doc['_id'] }}">
            <img src="{{ url_for('static',filename='images/edit.png') }}" , width="30" ) /></a>
            
            </td>

            **<div  id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div  role="document">
                    <div >
                        <div >
                            <h5  id="exampleModalLabel">Delete action</h5>
                            <button type="button"  data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div> 
                        <div >
                            Delete {{ doc["_id"] }} ?
                        </div>
                        <div >
                            <a href="./delete?_id={{ doc['_id'] }}"><button type="button"
                                    >OK</button></a>
                            <button type="button"  data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
    {% endfor %}**
    </tr>
</tbody>

I am sure that the forLoop works fine outside the modal, but I don't get why it doesn't work inside of it.

Is there anyone who can helps

CodePudding user response：

I have found a solution. data-target should include the target ID, that should also reported in the modal ID. So the table element should be:

<td ><img src="{{ url_for('static',filename='images/trash.png') }}" , width="30" data-toggle="modal"
            data-target="#Arr{{doc['_id']}}" ) /></td>

while the modal should report:

<div  id="Arr{{doc['_id']}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div  role="document">
                    <div >....

My question was the same as this one(Modal window in Jinja2 template. Flask), I am sorry to have posted it again.