Modal window in Jinja2 template. Flask

Question

Currently I am working on history page for web-application. App (written on Flask) saves history in sqlite and works with db through SQLAlchemy. It looks as follow:

As you can see in latest cell there are a lot of text data.

More to the point, I want to list this data on history page. For now my code looks like this:

{% extends "_base.html" %}

{% block content %}

<div id="div1" class="col-md-3">
    <p><a href='/' class='btn btn-primary btn-block' role='button'><span class='glyphicon glyphicon-chevron-left'></span> Back</a></p>
</div>

<div class="bs-example col-md-12">
    <br>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Task ID</th>
                <th>Date</th>
                <th>Host</th>
                <th>User</th>
                <th>Playbook</th>
                <th>Log</th>
            </tr>
        </thead>
        <tbody>
        {% for history in histories %}
            <tr>
                <td>{{ history.task_id }}</td>
                <td>{{ history.date.strftime("%d/%m/%y %H:%M") }} UTC</td>
                <td>{{ history.hostname }}</td>
                <td>{{ history.username }}</td>
                <td>{{ history.playbook }}</td>
                <td>{{ history.output }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

{% endblock %}

It produces such view:

Obviously it looks ugly, so I've decided to hide this output (latest cell) via button with bootstrap module window, like this one

And at this point I have a problem. I've created next template:

{% extends "_base.html" %}

{% block content %}

<div id="div1" class="col-md-3">
    <p><a href='/' class='btn btn-primary btn-block' role='button'><span class='glyphicon glyphicon-chevron-left'></span> Back</a></p>
</div>

<div class="bs-example col-md-12">
    <br>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Task ID</th>
                <th>Date</th>
                <th>Host</th>
                <th>User</th>
                <th>Playbook</th>
                <th>Log</th>
            </tr>
        </thead>
        <tbody>
        {% for history in histories %}
            <tr>
                <td>{{ history.task_id }}</td>
                <td>{{ history.date.strftime("%d/%m/%y %H:%M") }} UTC</td>
                <td>{{ history.hostname }}</td>
                <td>{{ history.username }}</td>
                <td>{{ history.playbook }}</td>
                <td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myOutput">Output</button></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

 <!-- Modal -->
  <div class="modal fade" id="myOutput" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

{% endblock %}

But I have no clue how to add correct output to body of every modal window. Do I need to generate a lot of modal windows in code with different ids like <div class="modal fade" id="myOutput1" role="dialog"> , <div class="modal fade" id="myOutput2" role="dialog"> and so on? Will it be correct?

Answer 1

I've done that with next code:

{% extends "_base.html" %}

{% block content %}

<div id="div1" class="col-md-3">
    <p><a href='/' class='btn btn-primary btn-block' role='button'><span class='glyphicon glyphicon-chevron-left'></span> Back</a></p>
</div>

<div class="bs-example col-md-12">
    <br>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Task ID</th>
                <th>Date</th>
                <th>Host</th>
                <th>User</th>
                <th>Playbook</th>
                <th>Log</th>
            </tr>
        </thead>
        <tbody>
        {% for history in histories %}
            <tr>
                <td>{{ history.task_id }}</td>
                <td>{{ history.date.strftime("%d/%m/%y %H:%M") }} UTC</td>
                <td>{{ history.hostname }}</td>
                <td>{{ history.username }}</td>
                <td>{{ history.playbook }}</td>
                <td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myOutput{{ history.task_id }}">Output</button></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

{% for history in histories %}
 <!-- Modal -->
  <div class="modal fade" id="myOutput{{ history.task_id }}" role="dialog">
    <div class="modal-dialog modal-lg">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Task Output</h4>
        </div>
        <div class="modal-body">
          <p>{{ history.output }}</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>
{% endfor %}

{% endblock %}

data-target in button and id in modal window were generated dynamically based on task_id value. I don't know if it's the best way but at least it works.

Answer 2

The secret is to use Jinja2 to identify when you "call" the modal and in the modal itself.

So, on the "call", instead of just the data-target="#myOutput", add Jinja2 at the end -> data-target="#myOutput {{ history.task_id }}"

In the modal, identify with the same name, instead of: id="myOutput", add Jinja2 at the end again -> id="myOutput {{ history.task_id }} "