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

Question

[DmSS1997]

У меня есть таблица с определёнными данными, но они все не помещаются и доп. информация выводится с помощью 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 для каждого объекта выводится информация не своего объекта, а только первого. Никак не могу понять в чём причина, помогите пожалуйста

Answer 1

[Сергей Горностаев]

Идентификаторы должны быть уникальны. Вместо вывода разметки модального окна для каждого элемента, нужно разметку вывести один раз и написать js-код, который будет подставлять нужные данные в модельное окно перед его показом.

Comments

[DmSS1997]

Спасибо, что указали на ошибку, я понял в чём причина, но решение нашёл более лёгкое, где не нужно писать дополнительный код. Для каждой записи я указал изменяемый id вида:

<td data-bs-toggle="modal" data-bs-target="#ArendatorID{{arendator.id}}"
         style="font-size 15px; color:#000000; ">{{arendator.city}}
</td>

И просто в этом же цикле вызываю modal с этим id :

<div class="modal fade" id="ArendatorID{{arendator.id}}" 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.square}}

                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Закрыть
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>