In Django bootstrap project toast messages showing for the first card in loop element-CodePudding

I want to toast messages for all those cards. but it is showing for the first card only. I have attached a view of my page where I want to add a toast message to view the details of the card if a user is not logged in. I noob in Django and Javascript. this is a small part of my university project.

my page looks like this: https://i.stack.imgur.com/cYSPW.jpg

document.getElementById("toastbtn").onclick = function() {
  
    var toastElList = [].slice.call(document.querySelectorAll('.toast'))
    var toastList = toastElList.map(function(toastEl) {
      
      return new bootstrap.Toast(toastEl)
    })
    toastList.forEach(toast => toast.show())
  }

<section >

            <div >
                <div >
                    {% for homes in home %}
                    <div >
                        <div >
                            <div >
                                <img src="{{ homes.coverImg.url }}" alt="Cover Image">
                                <span><h4>{{ homes.pricePerMonth }}Taka</h4></span>
                            </div>
                            <div >
                                <p > <i ></i>{{homes.address}}</p>
                                <h3>{{ homes.title}}</h3>
                                {% if request.user.is_authenticated %}
                                <a href="{% url 'HomeDetails' homes.id %}" >Details</a>
                                {% else %}                                                         
                                <button type="button"  id="toastbtn">XDetails</button>
                              
                                                         
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>

        </section>

        <!-- Alert Message Popup-->
          <!--bottom-0 end-0 p-3-->
          <div  style="z-index: 11">
            <div id="liveToast"  role="alert" aria-live="assertive" aria-atomic="true">
              <div >
                <img src="({% static 'img/icon.png' %})"  alt="...">
                <strong >My Second Home</strong>
                <small>0.1s ago</small>
                <button type="button"  data-bs-dismiss="toast" aria-label="Close"></button>
              </div>
              <div >
                Hello!<br>You need to login first to see details.
                <div >                 
                  <a  href="{% url 'login' %}">Sign In</a>
                  <button type="button"  data-bs-dismiss="toast">Close</button>
                </div>
            </div>
          </div>

CodePudding user response：

So here your problem comes from the id toastbtn. You have iterated the for loop and all the buttons in the cards got the same id but id unique for everyone so the id is added to the first card button only. Here one thing can be done remove the toastbtn id from the button and onclick attribute on the btn and pass the value the function call like shown below -

<button type="button"  onclick="showToast()">XDetails</button>

The showToast function is the same function u added in you js file Your JS file will look like this

function showToast() {
  
    var toastElList = [].slice.call(document.querySelectorAll('.toast'))
    var toastList = toastElList.map(function(toastEl) {
      
      return new bootstrap.Toast(toastEl)
    })
    toastList.forEach(toast => toast.show())
}

HTML File

<section >

            <div >
                <div >
                    {% for homes in home %}
                    <div >
                        <div >
                            <div >
                                <img src="{{ homes.coverImg.url }}" alt="Cover Image">
                                <span><h4>{{ homes.pricePerMonth }}Taka</h4></span>
                            </div>
                            <div >
                                <p > <i ></i>{{homes.address}}</p>
                                <h3>{{ homes.title}}</h3>
                                {% if request.user.is_authenticated %}
                                <a href="{% url 'HomeDetails' homes.id %}" >Details</a>
                                {% else %}                                                         
                                <button type="button"  onclick="showToast()">XDetails</button>
                              
                                                         
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>

        </section>

        <!-- Alert Message Popup-->
          <!--bottom-0 end-0 p-3-->
          <div  style="z-index: 11">
            <div id="liveToast"  role="alert" aria-live="assertive" aria-atomic="true">
              <div >
                <img src="({% static 'img/icon.png' %})"  alt="...">
                <strong >My Second Home</strong>
                <small>0.1s ago</small>
                <button type="button"  data-bs-dismiss="toast" aria-label="Close"></button>
              </div>
              <div >
                Hello!<br>You need to login first to see details.
                <div >                 
                  <a  href="{% url 'login' %}">Sign In</a>
                  <button type="button"  data-bs-dismiss="toast">Close</button>
                </div>
            </div>
          </div>