@DmSS1997

В своём django проекте использую bootstrap modal и не могу в цикле для каждого объекта выводить свою информацию, в чём причина?

У меня есть таблица с определёнными данными, но они все не помещаются и доп. информация выводится с помощью bootstrap modal.
В базе данных есть объект с разными полями, все они выводятся в цикле for для каждого объекта.
<div class="table-responsive">
       <table class="table table-borderless" style="background: #F9F9F9; vertical-align:center;">
             <thead class="table" style="border-bottom: solid 2px #C4C4C4; height: 50px;">
                   <tr>
                   <th scope="col" style="color: #666970; font-weight:300; font-size: 18px;">Город</th>
                   <th scope="col" style="color: #666970; font-weight:300; font-size: 18px;">Логотип</th>
                   <th scope="col" style="color: #666970; font-weight:300; font-size: 18px;">Торговая марка</th>
                   <th scope="col" style="color: #666970; font-weight:300; font-size: 18px;">Необходимая площадь
                   </th>
                   <th scope="col" style="max-width:140px; color: #666970; font-weight:300; font-size: 18px;">Вид деятельности
                    </th>
                    </tr>
                    </thead>
                    <tbody class="table">
                    {% for arendator in arendators%}
                    <tr>
                        <td data-bs-toggle="modal" data-bs-target="#staticBackdrop"
                            style="font-size 15px; color:#000000; ">{{arendator.city}}
                        </td>
                        <td style="font-size 15px; color:#000000;">{% if arendator.logo %}
                            <img src="{{ arendator.logo.url }}" width="100px">
                            {% else %}
                            -
                            {%endif%}
                        </td>
                        <td style="font-size 15px; color:#000000;">{{arendator.name}}</td>
                        <td style="font-size 15px; color:#000000;">{{arendator.square}}</td>
                        <td style="max-width:160px; font-size 15px; color:#000000;">{{arendator.kind_of_activity}}</td>
                    </tr>


                    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="true"
                         tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="staticBackdropLabel">Дополнительные требования</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    {{arendator.requirements}}
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Закрыть
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </table>
            </div>


Но почему-то в доп требованиях modal для каждого объекта выводится информация не своего объекта, а только первого. Никак не могу понять в чём причина, помогите пожалуйста
  • Вопрос задан
  • 46 просмотров
Решения вопроса 1
sergey-gornostaev
@sergey-gornostaev Куратор тега Django
Седой и строгий
Идентификаторы должны быть уникальны. Вместо вывода разметки модального окна для каждого элемента, нужно разметку вывести один раз и написать js-код, который будет подставлять нужные данные в модельное окно перед его показом.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы