django load modal on click для каждой ссылки

Question

В моем проекте у меня много Buildings, а в buildings.html я показываю каждый Building, используя одно изображение (big_image). То, что я хочу сделать, - загрузить модальный каждый раз, когда пользователь нажимает Building, этот модальный способ позволяет пользователю видеть дополнительные изображения здания.

Это было бы очень легко, если бы я загрузил каждый мода Building, когда пользователь вошел в эту страницу. Но если бы я сделал это, на страницу понадобилось бы возраст для загрузки (потому что есть много Buildings), поэтому я хочу использовать .innerHTML jQuery для добавления модального html на страницу, когда пользователь нажимает на Building, но когда я это делаю, только код добавляется в

`{% for building in buildings %}{% if building.pk == 1(or whatever is the pk) %}{% endif %}{% endfor %}` 

Там может быть более простой способ добиться того, что я не знаю

Вот мой код:

buildings.js

function loadModal(objectPk){ 
    document.getElementById("loadModal").innerHTML = 

"{% for building in buildings %}{% if building.pk == "+objectPk+" %} 
<div class="modal fade mymodal in " id="myModal{{ building.pk }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 
aria-hidden="true"> 
<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">{{ building.name }}</h4> 
     </div> 
     <div class="modal-body"> 
      <p>{{ building.short_description }}</p> 
      {% for i in building.images.all %} 
      <img src="{{ i.image.url }}" class="img-responsive"> 
      {% endfor %} 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button> 
     </div> 
    </div> 
</div> 
</div>{% endif %}{% endfor %}"; 
} 

Все вышеперечисленное находится в одной строке.

buildings.html

<a data-toggle="modal" data-target="#myModal{{ building.pk }}" href="" onClick="JavaScript:loadModal({{ building.pk }});"></a> 
<div id="loadModal"></div> 

views.py только в случае

class BuildingsModalView(generic.ListView): 
    template_name = 'info/buildings.html' 

    context_object_name = 'construction_list' 

    queryset = Residence.objects.all() #ignore this 

    def get_context_data(self, **kwargs): 
     context = super(BuildingsModalView, self).get_context_data(**kwargs) 
     context['building'] = Buildings.objects.all() 
     # And so on for more models 
     return context 

Answer 1

Вы можете использовать немного JavaScript для изменения значений в HTML модальной в. В этом примере я создаю ссылку для каждого здания с атрибутами данных для имени, описания и имени.

Затем я добавляю прослушиватель кликов к классу ссылки на здание. При щелчке он получает доступ ко всем этим значениям данных и выталкивает их в нужное место модального.

<!-- Create a unique link for every building --> 
{% for building in buildings %} 
<a href="#" 
    class="building-link" 
    data-toggle="modal" 
    data-target="#building-modal" 
    data-img="{{ building.img.url }}" 
    data-description="{{ building.short_description }}" 
    data-name="{{ building.name }}"> 
    {{ building.name }} 
</a> 
{% endfor %} 

<!-- This is our blank modal, with ids for the values to be injected --> 
<div class="modal fade mymodal in " id="building-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 
aria-hidden="true"> 
    <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="building-name"></h4> 
      </div> 
      <div class="modal-body"> 
       <p id="building-description"></p> 
       <img id="building-img" src=""/> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button> 
      </div> 
     </div> 
    </div> 
</div> 

<!-- When a link is clicked, grab all the data values and pop them inro the modal --> 
<script> 
$('.building-link').click(function(){ 
    $('#building-name').html($(this).data('name')); 
    $('#building-description').html($(this).data('description')); 
    $('#building-img').src($(this).data('img')); 
}); 
</script> 

Тогда только это не делает, это делать все изображения здания. Я бы порекомендовал просто загрузить его для начала, а затем настроить еще одну конечную точку, чтобы получить все изображения зданий после их выбора.