Bootstrap модальный не обновляет модальный контент - PullRequest
Новая
       14

Bootstrap модальный не обновляет модальный контент

2 голосов
/ 27 марта 2019

Я пытаюсь создать таблицу моделей с кнопкой рядом с ними, которая открывает модальное окно и имеет ту же строку модели в виде формы. Таблица заполняется правильно, но n создаваемых модальностей начальной загрузки содержит только первое итеративное значение модели. Это потому, что bootstrap загружает содержимое модалов только один раз при отображении страницы? Что мне делать, чтобы решить проблему? Должен ли я запустить функцию для обновления модального содержимого в соответствии с данными модели, которые у него есть?

Не стесняйтесь задавать дополнительные разъяснения. 

{% extends 'base.html' %}

{% load static %}

{% block content %}
    <table>
        {% for item in data %}

            <tr>
                <th>From</th>
                <th>To</th>
                <th>Weight</th>
                <th>Length</th>
                <th>Type</th>
                <th>Material Type</th>
                <th>Number of Trucks</th>
                <th>Loading Time</th>
            </tr>
            <tr>
                <td>{{ item.From }}</td>
                <td>{{ item.To }}</td>
                <td>{{ item.Weight }}</td>
                <td>{{ item.Length }}</td>
                <td>{{ item.Type }}</td>
                <td>{{ item.MaterialType }}</td>
                <td>{{ item.Numberoftrucks }}</td>
                <td>{{ item.Loadingtime }}</td>
                <td>
                    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Bid
                        now! for id {{ item.id }} </button>
                </td>
                {#        {% endfor %}#}


                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                            </div>
                            <div class="modal-body">

                                <input class="form-control" id="disabledInput" type="text"
                                       placeholder="Disabled input here..." value="{{ item.To }}" disabled>
                                <input class="form-control" id="disabledInput" type="text"
                                       placeholder="Disabled input here..." value="{{ item.From }}" disabled>
                                <input class="form-control" id="disabledInput" type="text"
                                       placeholder="Disabled input here..." value="{{ item.Weight }}" disabled>
                                <input class="form-control" id="disabledInput" type="text"
                                       placeholder="Disabled input here..." value="{{ item.Length }}" disabled>
                                <input class="form-control" id="disabledInput" type="text"
                                       placeholder="Disabled input here..." value="{{ item.Type }}" disabled>
                                <input class="form-control" id="disabledInput" type="text"
                                       placeholder="Disabled input here..." value="{{ item.MaterialType }}" disabled>
                                <input class="form-control" id="disabledInput" type="text"
                                       placeholder="Disabled input here..." value="{{ item.Numberoftrucks }}" disabled>
                                <input class="form-control" id="disabledInput" type="text"
                                       placeholder="Disabled input here..." value="{{ item.Loadingtime }}" disabled>
                                <input class="form-control" id="disabledInput" type="text"
                                       placeholder="Disabled input here...">Bid
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>

                        </div>
                    </div>
                </div>

            </tr>
        {% endfor %}
    </table>

{% endblock %}

1 Ответ

1 голос
/ 27 марта 2019

Вы можете исправить это, добавив model.pk к модальному id

в кнопке 

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
     data-target="#myModal{{ item.id }}">
    Bid now! for id {{ item.id }}
</button>

и в 

 <div class="modal fade"
      id="myModal{{ item.id }}"
      tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

другом решенииэто функция создания JS для загрузки новых данных каждый раз, когда вы активируете модальный.

...