Skip to content Skip to sidebar Skip to footer
Home / Django / Html / Javascript / Modal Dialog / Python

Data In Django For Loop {% For %} Not Loading For Modal

Post a Comment
I am trying to display information from a django for loop in the HTML. The HTML is as follows:
{% for product in page.object_list %}

Solution 1:

You have same ids for your modal box that's why only first one works . Instead you can make them unique using id="mySizeChart_{{product.id}}" same for modal-box i.e : id="mySizeChartModal_{{product.id}}" .Then , inside your jquery code simply use $(this).attr("id").split("_")[1] to get id and show only relevant modal.

Demo Code :

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

$(".ebcf_close").click(function() {
  $(".ebcf_modal").hide();
});
.ebcf_modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.ebcf_modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 65%;
}


/* The Close Button */

.ebcf_close {
  color: #aaaaaa;
  float: right;
}

.ebcf_close:hover,
.ebcf_close:focus {
  color: #000;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="row">

  <div class="col-lg-3">
    <img class="thumbnail update-wishlist " style="height: auto" src="{{product.finalimagelink}}">
    <div class="box-element product">
      <h6><strong>Abc</strong></h6>
      <hr>
      <!--add id="mySizeChart_{{product.id}}"-->
      <a id="mySizeChart_1" class="button" style="vertical-align:middle"><span>Prices</span></a>
      <!--add id="mySizeChartModal_{{product.id}}"-->
      <div id="mySizeChartModal_1" class="ebcf_modal">

        <div class="ebcf_modal-content">
          <span class="ebcf_close">&times;</span>
          <p>Abc FROMxyz £23</p>
        </div>

      </div>

      <button data-product="{{product.id}}" data-action="add" class="btn btn-outline-secondary add-btn update-wishlist" style="width:50px;"><img class="button-image" src="{% static 'images/add.png' %}"></button>
      <h4 style="display: inline-block; float: right"><strong>£23</strong></h4>

    </div>
  </div>
  <div class="col-lg-3">
    <img class="thumbnail update-wishlist " style="height: auto" src="{{product.finalimagelink}}">
    <div class="box-element product">
      <h6><strong>Abc2</strong></h6>
      <hr>

      <a id="mySizeChart_2" class="button" style="vertical-align:middle"><span>Prices</span></a>

      <div id="mySizeChartModal_2" class="ebcf_modal">

        <div class="ebcf_modal-content">
          <span class="ebcf_close">&times;</span>
          <p>Abc2 FROMxyz £232</p>
        </div>

      </div>

      <button data-product="{{product.id}}" data-action="add" class="btn btn-outline-secondary add-btn update-wishlist" style="width:50px;"><img class="button-image" src="{% static 'images/add.png' %}"></button>
      <h4 style="display: inline-block; float: right"><strong>£232</strong></h4>

    </div>
  </div>

</div>

You may like these posts

Post a Comment for "Data In Django For Loop {% For %} Not Loading For Modal"