CODEWITHSUNDEEP
javascriptpythonhtmldjangobootstrap-4
Fede
Fede

Reputation: 37

Django project - OPEN MODAL FROM BOOTSTRAP CARD

I'm working on a django project in which i have several bootstrap cards that display some datas that i get from the database. More precisely each cards represents a project, so it has its title, its description, its deadline and so on. At the end of the card i put a button to open a modal to show more details of the project that aren't displayed in the card. My problem is that I don't know how to take the right information of the cards for each modal, for example even if i click on the button of the third card to open the modali to view the detail of the third projects, the modal still shows me the data of the first project (so it takes them from the first card). Can anyone help me please? Here the card's code:

{% for project in projects %}
    <div class="col-3">
        <div class="card bg-light border-dark my-3 mx-3" style="max-width: 18rem; min-height:100%">
            <div class="card-header" style="background-color: #b3b492;"><h3>{{project.titolo }}</h3></div>
            <div class="card-body">
                <h5 class="card-title">Deadline: {{ project.date|date:"d/m/Y" }}</h5>
                <p class="card-text">{{ project.description}}</p>
                <hr>
                <small>
                    <p class="card-text" style="font-weight:bold;"> {{ project.client }</p>  
                </small>
          
                <button type="button" class="btn btn-sm card-button" data-toggle="modal"
                        data-target=".bd-example-modal-lg" 
                        style="position: absolute; bottom: 10px; right:50px">
                    {% csrf_token %}
                    <svg width="1.2em" height="1.2em" viewBox="0 0 16 16" class="bi bi-eye" fill="#b3b492"
                         xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                              d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z"/>
                        <path fill-rule="evenodd"
                              d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                    </svg>
                </button>

Upvotes: 1

Views: 503

Answers (1)

mdelaunay
mdelaunay

Reputation: 26

You need to handle unicity for each modal.

<button type="button" class="btn btn-sm card-button" data-toggle="modal"
                    data-target="#modal-project-{{project.pk}}" 
                    style="position: absolute; bottom: 10px; right:50px">

now, each project should have its specific modal. Something like :

<!-- Modal -->
<div class="modal fade" id="modal-project-{{project.pk}}" tabindex="-1"
    aria-labelledby="modal-project-{{project.pk}}-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-project-{{project.pk}}-label">modal exemple</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Something in the modal for this project
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

All this in your {% for project in projects %} loop of course.

Upvotes: 1

Related Questions