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

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;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><divclass="row"><divclass="col-lg-3"><imgclass="thumbnail update-wishlist "style="height: auto"src="{{product.finalimagelink}}"><divclass="box-element product"><h6><strong>Abc</strong></h6><hr><!--add id="mySizeChart_{{product.id}}"--><aid="mySizeChart_1"class="button"style="vertical-align:middle"><span>Prices</span></a><!--add id="mySizeChartModal_{{product.id}}"--><divid="mySizeChartModal_1"class="ebcf_modal"><divclass="ebcf_modal-content"><spanclass="ebcf_close">&times;</span><p>Abc FROMxyz £23</p></div></div><buttondata-product="{{product.id}}"data-action="add"class="btn btn-outline-secondary add-btn update-wishlist"style="width:50px;"><imgclass="button-image"src="{% static 'images/add.png' %}"></button><h4style="display: inline-block; float: right"><strong>£23</strong></h4></div></div><divclass="col-lg-3"><imgclass="thumbnail update-wishlist "style="height: auto"src="{{product.finalimagelink}}"><divclass="box-element product"><h6><strong>Abc2</strong></h6><hr><aid="mySizeChart_2"class="button"style="vertical-align:middle"><span>Prices</span></a><divid="mySizeChartModal_2"class="ebcf_modal"><divclass="ebcf_modal-content"><spanclass="ebcf_close">&times;</span><p>Abc2 FROMxyz £232</p></div></div><buttondata-product="{{product.id}}"data-action="add"class="btn btn-outline-secondary add-btn update-wishlist"style="width:50px;"><imgclass="button-image"src="{% static 'images/add.png' %}"></button><h4style="display: inline-block; float: right"><strong>£232</strong></h4></div></div></div>

Share