CODEWITHSUNDEEP
javascriptjquerydjangojinja2tailwind-css
Luffy123
Luffy123

Reputation: 47

modal opening only for the first for loop element?

I have my for loop in Django such as its only opening the modal for the first element and nothing happens for other elements.

This is my HTML file it display all elements in a table with delete button. When clicking delete button a modal is opened but it is opened for the first element only, what should I change in this?

 <table>
                {% for card in cards %}
                <tr class="record">
                  <td>{{card.number}}</td>
                  <td>
                    <button
                      class="hover:bg-gray-500 duration-500"
                      id="delete-btn"
                    >
                
                    </button>
  <div
                      class="
                        fixed
                        flex
                        justify-center
                        items-center
                        hidden
                      "
                      aria-labelledby="modal-title"
                      aria-modal="true"
                      id="overlay"
                    >
                   ............. #some lines of code
                          <div
                            class="
                              bg-gray-50
                              px-4
                              py-3
                              sm:px-6 sm:flex sm:flex-row-reverse
                            "
                          >
                            <a
                              href="{% url 'p:delete-card' card.id %}"
                              id="delbutton"
                            >
                              <button
                                type="button"
                                class="
                                  w-full
                                  inline-flex
                                  justify-center
                                
                                "
                              >
                                Delete
                              </button>
                            </a>
                          </div>
                        </div>
                      </div>
                  </td>
                </tr>
                {% endfor %}

My js to open the modal on button click

      window.addEventListener('DOMContentLoaded',() =>{
           const overlay = document.querySelector('#overlay')
           const delbtn = document.querySelector('#delete-btn')

           const toggleModal = () => {
               overlay.classList.toggle('hidden')
               overlay.classList.add('flex')
           }

             delbtn.addEventListener('click',toggleModal)
   
                 })

Upvotes: 0

Views: 607

Answers (2)

Obed Amoako
Obed Amoako

Reputation: 393

Every modal should have a different id in the for loop.
You can use something like id="modal{{card.id}}"

Then select that id

Does that help you?

Upvotes: 0

Luffy123
Luffy123

Reputation: 47

I solved it like this with the help of Data in Django for loop {% for %} not loading for Modal

I changed the id of all the buttons like this and added delete-button class!

 <button class="hover:bg-gray-500 duration-500 delete-button" id="delete-btn_{{card.id}}">
 </button>

Like this added card.id in overlay too.

My Jquery:

  $(".delete-button").click(function() {
             var id = $(this).attr("id").split("_")[1]
               $(`#overlay_${id}`).show();
                 });

Upvotes: 1

Related Questions