How to Create Multiple Modal Dynamically in a Single Page

Question

I am doing a Django Blog Project and it fetch all Blogs from the Database and show Blog Title in User Profile only. I want to create Bootstrap Modal for each Blog that is shown in the profile. Whenever a User click on a Title, the Modal will appear with Details.

{% for blog in blogs.all %}
  <div class="card mb-4 shadow-sm ">
      <p class="card-text "><h2>{{ blog.title }}</h2></p>
      <div class="card-body">
        <div class="btn-group">

          <!-- Open a Modal for the blog -->
          <!-- Button To Implement the Modal-->
          <button id = "modalToggle" type="button" class="btn btn-sm btn-outline-secondary" data-toggle="modal" data-target="#modal">View More</button>

          <!-- Modal -->
          <div class="modal fade" id="modal" role="dialog">
            <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                <h4 class="modal-title">{{ blog.title }}</h4>
                </div>
                <div class="modal-body">
                <p>{{ blog.body }}</p>
                </div>
                <div class="modal-footer">

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

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

Here all Blogs are showing the Modal of the first one. I cannot create multiple modals for each Blog.

Ah, worth noting when you are in the `for` loop & generating `modal`'s, you are generating (or at least attempting to), generate multiple `modal`'s with the same `id`. You can try to set the id to something incremental, which might be a good start / good practice — EGC, Oct 15 '19 at 20:45
Please read more on `id` unique requirements [here](https://stackoverflow.com/a/9454716/11700321) — EGC, Oct 15 '19 at 20:46
I tried to increment the id but could not. I am very new in web development and Django. I could not figure it out how to use variable in html code and increment.. — yuv, Oct 16 '19 at 05:24

score 0 · Accepted Answer · answered Oct 15 '19 at 20:47

0

The id attribute of an html element should be unique and appear only on one element in the html document. The problem you're encountering is likely because you're creating an element with id="modal" for each blog. You can fix this with:

<button id = "modalToggle" type="button" class="btn btn-sm btn-outline-secondary"
        data-toggle="modal" data-target="#modal-blog-{{blog.pk}}">View More</button>

      <!-- Modal -->
      <div class="modal fade" id="modal-blog-{{blog.pk}}" role="dialog">

By using a unique string for the id via including the blog pk the buttons should trigger their respective blog.

answered Oct 15 '19 at 20:47

schillingt

13,493
2
32
34

If I want to use a incremental variable in the loop and use it instead {{ blog.pk }} then how can I do that? – yuv Oct 16 '19 at 05:54
https://docs.djangoproject.com/en/2.2/ref/templates/builtins/#for Look towards the bottom of the `for` section. It describes some looping variables you can access. – schillingt Oct 16 '19 at 15:11

How to Create Multiple Modal Dynamically in a Single Page

1 Answers1