点击每个链接的django加载模式

Question

In my project I have many Buildings , and in the buildings.html I display each Building using a single image ( big_image ). What I want to do is load a modal every time the user clicks in a Building , this modal allows the user to see additional images of the building.

This would be very easy if I loaded each Building 's modal when the user entered the page. But if I did that the page would take ages to load (because there are many Buildings ), so my idea is to use jQuery's .innerHTML to append the modal html to the page when the user clicks on a Building , but when I do that the only code appended is

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

There might be an easier way to achieve that that I dont know

Here's my code:

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 %}";
}

All of the above is in a single line.

buildings.html

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

views.py just in case

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

You can use a little bit of javascript to change the values in the modal's html. In this example, I create a link for each building, with data attributes for the img, description, and name.

Then, I add a click listener to the class of the building link. When clicked, it accesses all of those data values and pops them into the correct spot of the modal.

<!-- 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>

Then only thing this doesn't do is do all of the building images. I would recommend just loading one to begin with and then setting up another endpoint to get all of the building images once one is selected.