Модал в flask отображает только первую запись - PullRequest
Новая
       43

Модал в flask отображает только первую запись

1 голос
/ 10 марта 2020

Я хочу редактировать записи, которые запрашиваются из базы данных sqlite. Все записи отображаются на странице, но как только я нажимаю кнопку «Изменить», модал отображает только данные из первой строки. Кто-нибудь может посоветовать, пожалуйста, что мне делать? Большое спасибо!

Здесь выполняется запрос и набор результатов отправляется на страницу.

views.py 

@app.route('/flows')
def flows():
    flows = models.Workflows.query.all()
    return render_template('flows.html', title='Flows', flows=flows, len=len(flows), currentFlows='active')

Я до сих пор не работал само редактирование, поскольку я не решил проблему просмотра только одной записи.

app. js

$('#modalEditFlows').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget);

  var name = $('#flowName').text();
  var desc = $('#flowDesc').text();
  var status = $('#flowSts').text();

  var modal = $(this);
  modal.find('.modal-body input').val(name);
  modal.find('.modal-body textarea').val(desc);

});

Наконец, блок html, который получает и монтирует таблицу с все данные.

HTML блок 

{% extends "base.html" %}
{% block content %}
<h1 align="center">Workflows</h1>
<div align="center">View all existing workflows</div>
<br>
<br>
<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th> Name </th>
      <th width="40%"> Description </th>
      <th> Status </th>
      <th>#</th>
    </tr>
  </thead>
  <tbody>
    {% for i in range(0,len) %}
    <tr>
      <td width="40%" id="flowName"> {{ flows[i].flow_name }} </td>
      <td id="flowDesc"> {{ flows[i].description }} </td>
      <td width="7%" id="flowSts"> {{ flows[i].status }}</td>
      <td width="3%">
        <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#modalEditFlows">Edit</button>
      </td>
    </tr>

    <!-- Modal -->
    <div class="modal fade" id="modalEditFlows" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Edit workflow</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="col-form-label">Flow name:</label>
                <input type="text" class="form-control" id="flow-name">
              </div>
              <div class="form-group">
                <label for="message-text" class="col-form-label">Description:</label>
                <textarea class="form-control" id="description"></textarea>
              </div>
              <div class="form-group">
                <label for="recipient-name" class="col-form-label">Status:</label><br>
                <select id="status">
                  <option value="ACTIVATED">ACTIVATED</option>
                  <option value="DEACTIVATED">DEACTIVATED</option>
                </select>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    <!-- End modal -->

    {% endfor %}
  </tbody>
</table>
{% endblock %}

1 Ответ

0 голосов
/ 10 марта 2020

Элементы HTML должны иметь различные id s.
. Сейчас каждый модальный вид выглядит как первый модальный для браузера.

Вместо этого вы должны сделать что-то вроде: 

<td width="40%" id="flowName{{ i }}"> {{ flows[i].flow_name }} </td>
<td id="flowDesc{{ i }}"> {{ flows[i].description }} </td>
<td width="7%" id="flowSts{{ i }}"> {{ flows[i].status }}</td>
...
<div class="modal fade" id="modalEditFlows{{ i }}" ...
...