CODEWITHSUNDEEP
javascripthtmldjangotwitter-bootstrapbootstrap-modal
fpaekoaij
fpaekoaij

Reputation: 193

dynamic data target bootstrap modal -Django

I have a bunch of posts to show on a page. After clicking to read more, a bootstrap modal will come where the post will be showed. Also I am using django.

The thing is that I want to iterate through my queryset of all posts with a for loop.

My html looks like: 

 {% for post in posts %}

   <!-- Modal -->
   <div class="modal fade" id="post1" tabindex="-1" role="dialog" aria-hidden="true">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-body">         

             <!-- Button trigger modal -->

             <p> {{ post.content|truncatewords:10 }}  
             <a data-toggle="modal" data-target="#post1">Post 1</a></p>       

           </div>
         </div>
      </div>
    </div>
 {% endfor %}

As you can see, here, in the trigger for showing the modal, data-target="#post1" is there and in the modal, there is also id="post1".

Now it's okay for one modal. But I have like 10-12 blog posts. So I can't hardcode each of it's data-target. So what can I do? I don't know javascript, so a complete bootstrap solution maybe helpful. Nevertheless any solution or idea what can I do? Like post1 will get the id1 and then post2 should get the id2.

So can you please help me with this or give any other solution? It will be extremely helpful. I have tried this post: how to dynamically change bootstrap modal data-target click but that didn't help.

Upvotes: 1

Views: 2154

Answers (1)

fpaekoaij
fpaekoaij

Reputation: 193

So it was fairly simple, what I needed to do was to change the modal-target to #modal{{post.id}}" and the id of modal to modal{{post.id}} and voila!

Upvotes: 3

Related Questions