Abhishek Chauhan Abhishek Chauhan -4 years ago 45
jQuery Question

bootstrap modals only working on some elements and not working on others.Elements are dynamically rendered

<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


this is my html's head content.

my template contains Dynamically rendered post element(thumbnail) which contains a Modal.

<li><div class="thumbnail" id="{{post.0.pk}}">
<a href="#exampleModalLong{{post.0.pk}}" class="popup" data-toggle="modal">(Input form)</a>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong{{post.0.pk}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">


........

javascript that renders these posts is:

if ($(window).scrollTop() == ($(document).height() - $(window).height()))
{
ready=false;
$.ajax(
{
url:'/home/scroll/loadcontent/',
method:'get',
data:{posts:str},
dataType:'json',
success:function(response)
{

$("#col1").children('#tiles').append(response.col1);
$("#col1").children('#tiles').append(response.col4);
$("#col2").children('#tiles').append(response.col2);
$("#col2").children('#tiles').append(response.col5);
$("#col3").children('#tiles').append(response.col3);
$("#col3").children('#tiles').append(response.col6);
}
}).always(function(){
ready = true; //Reset the flag here
});
}
}
window.onscroll=yHandler;


in this arrangement all the elements that are rendered in col1($("#col1").children('#tiles').append(response.col1);) are having there modals working while any of the others is not...

Answer Source

I think this is what you need. Remove the fade class from the template

if ($(window).scrollTop() == ($(document).height() - $(window).height())){
   ready=false;
   $.ajax({
      url: "/home/scroll/loadcontent/",
      method: "get",
      data: { 
          posts: str
     },
     dataType: "json",
     success: function(response) {

         $("#col1").children('#tiles').append(response.col1);
         $("#col1").children('#tiles').append(response.col4);
         $("#col2").children('#tiles').append(response.col2);
         $("#col2").children('#tiles').append(response.col5);
         $("#col3").children('#tiles').append(response.col3);
         $("#col3").children('#tiles').append(response.col6);

       }
    })
    .always(function(){
        ready = true; //Reset the flag here
    });
 }

window.onscroll=yHandler

EDIT:

  • In the template you're missing 2 closing tags for the last 2 divs.
  • In the head you have included jQuery twice.
  • Still I'm worried about $("#col1"), $("#col2") and $("#col3") having children with the same id #tiles
  • I noticed some things...also...When the stuff like {{post.0.pk}} gets compiled?
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download