multi modals bootstrap in for loop django

Question

I have a for loop on my html code to display a list of data, when I made a Bootstrap Modal in this loop to display it for each element of the list. It seems that the modal work only for the first element of the list.

    {% for i in lb %}
    <button  class="btn" id="myBtn" title="Ajouter Serveur" style="padding-bottom:1px" data-target="#myModal"><a class="icon-plus-sign" title="Ajouter Serveur"></a></button>
    <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">

                            <h4 class="modal-title">Ajouter Serveur</h4>
                        </div>
    <div class="modal-body">
                            <form method="post" class="loginForm">
                            <input type="hidden" name="lb" value="{{ i.Nom }}">
                            <h6>{% csrf_token %}
                                {{ form.as_table }}</h6>

                        <input type="submit" name="submit" class="btn btn-primary " value="Submit" />
                            </form>
                        </div>
                        <div class="modal-footer">

                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                        </div>

                        </div></div>

     {% endfor %}

ilse2005 · Answer 1 · 2016-03-04T09:27:56.543

The id value of the button and <div class="modal"> have to be unique in the document. Try adding a unique value to the id, ie:

<div class="span12">
                {% for i in lb %}

                <div id="Person-1" class="box">
                    <div class="box-header">
                        <div class="span10">
                        <i class="icon-hdd icon-large"></i>
                        <h5>{{i.Nom}}</h5></div>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button  class="btn" id="myBtn{{i.id}}" title="Ajouter Serveur" style="padding-bottom:1px" data-target="#myModal{{ i.id }}"><a class="icon-plus-sign" title="Ajouter Serveur"></a></button>
                        <div class="modal fade" id="myModal{{ i.id }}" role="dialog">
                        <div class="modal-dialog">

  <!-- Modal content-->
                        <div class="modal-content">
                        <div class="modal-header">

                            <h4 class="modal-title">Ajouter Serveur</h4>
                        </div>
                        <div class="modal-body">
                            <form method="post" class="loginForm">
                            <input type="hidden" name="lb" value="{{ i.Nom }}">
                            <h6>{% csrf_token %}
                                {{ form.as_table }}</h6>

                        <input type="submit" name="submit" class="btn btn-primary " value="Submit" />
                            </form>
                        </div>
                        <div class="modal-footer">

                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                        </div>

                        </div></div>
                    </div>
                    <div class="box-content box-table">
                    <table class="table table-hover tablesorter">
                        <thead>
                            <tr>
                                <th>Nom</th>
                                <th>Adresse</th>
                                <th>Etat</th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for j in s %}
                            {% if i.Nom == j.LB %}
                            <tr>
                                <td>{{ j.Nom }}</td>
                                <td>{{ j.Adresse }}</td>
                                {% if j.Etat == m %}
                                <td><a href="/etat/{{ j.id }}">Désactiver</a></td>
                                {% else %}
                                <td><a  href="/etat/{{ j.id }}">Activer</a></td>
                                {% endif %}
                                <td><a>Edit</a></td>
                                <td><a href="/delete/{{ j.id }}">Supprimer</a></td>
                                {% if j.Etat == m %}
                                <td class="icon-ok-circle icon-large" style="color : green" title="Activé"></td>
                                {% else %}
                                <td class="icon-remove-circle icon-large" style="color : red" title="Désactivé"></td>
                                {% endif %}
                            </tr>
                            {% endif %}
                            {% endfor %}
                        </tbody>
                    </table>
                    </div>

                </div>
                    <script>
                    var a = "{{ i.id }}"
                    $(document).ready(function(){
                    $("#myBtn"+a).click(function(){
                      $("#myModal"+a).modal({show:true});
                    });
                    });
                    </script>
                {% endfor %}

            </div>

If I change the button's id to myBtn{{i.Nom}} and the div's id to myModal{{i.Nom}} all the button doesn't work but if I change only the div's id the first modal still work and knowing that I changed the script which I put it into the loop of course : — Ch.Hedi, Mar 04 '16 at 08:21
The important point is that every modal div has a unique id. And the value of data-target has to be the same. That's how the button knows which modal to open — ilse2005, Mar 04 '16 at 08:36
And you also need to define a onclick functuon for every button id! — ilse2005, Mar 04 '16 at 08:38
Yes, I made all required changes and I put the onclick function in the loop to define it for every button id but still doesn't work. — Ch.Hedi, Mar 04 '16 at 08:55
The problem is this line: `$("#myBtn").click(function(){` there you also have to add `a` --> `$("#myBtn"+a).click(function(){` — ilse2005, Mar 04 '16 at 09:08
I edited the answer, so that the code should work --> added {{i.id} to #myBtn id and `a` to $("#myBtn") — ilse2005, Mar 04 '16 at 09:28
I'm sorry but it doesn't work. I understand the issue but I didn't find how to solve it — Ch.Hedi, Mar 04 '16 at 10:06
Look into the html source code, if every element has the correct id. — ilse2005, Mar 04 '16 at 13:47

score 2 · Answer 2 · edited Mar 26 '21 at 08:11

2

In HTML id have unique identification. So we use unique id in every modal

{% for l in lamp %}
<h6>change in button</h6>

<button data-target="#mymodal{{l.id}}"</button>

<h6>change in modal id </h6>

<div class="modal" id="mymodal{{l.id}}"</div>
 {% endfor %}

edited Mar 26 '21 at 08:11

Eric Aya

69,473
35
181
253

answered Mar 26 '21 at 05:43

Prashan Basantia

19
2

multi modals bootstrap in for loop django

2 Answers2

Linked