CODEWITHSUNDEEP
javascriptjquerycssajax
tyler
tyler

Reputation: 424

No css styling on content after appending it (with ajax)

There are dozens of threads out there but after wasting 2 days I still can´t find a solution: I´m trying to create a website with an "infinite scrolling" function. By scrolling to the bottom of the page this is beeing triggered:

$(window).scroll(function() {
   if($(window).scrollTop() == $(document).height() - $(window).height()) {  

   $.ajax({
   url: "loadMoreComments.php?lastComment="+ $(".allvideos:last").attr('id') ,
  success: function(html) {

  if(html){       
  $(html).appendTo(".portfolioContainer");

  }
}
});
}
});

...so the content I would like to append (html) is generated within "loadMoreComments.php". The problem is that the new appended content has no css styling applied to it. This is how the new content looks inside the source code (after appending):

sourcecode

The styling is applied to the ids 1-7 but the newly generated "figures" (ids 8-10) are without any styling. Eventhough they are generated exactly the same way the others are created. Oviously my whole layout goes crazy. Any solutions? Thx.

EDIT: I´m using this bootstrap template: click.... to generate the tiles / figures.

Upvotes: 1

Views: 274

Answers (3)

tyler
tyler

Reputation: 424

After trying a lot, I found out my bootstrap template uses isotope plugin to layout the tiles. As its documentary indicates (documentary) I had to call the specific isotop method to add and re-layout the new items. I had to use the "insert" method instead of "append" - don´t know why but it works. 4 days of work :|

$('#portfolioContainer').isotope( 'insert', $newItems );

Upvotes: 1

Araz Shamsaddinlouy
Araz Shamsaddinlouy

Reputation: 401

try this:

$(window).scroll(function() {
   if($(window).scrollTop() == $(document).height() - $(window).height()) {  

   $.ajax({
   url: "loadMoreComments.php?lastComment="+ $(".allvideos:last").attr('id') ,
  success: function(html) {

  if(html){       
  $(html).appendTo(".portfolioContainer");
     var oddStyle = $(".effect-jazz").eq(0).attr("style");
     var evenStyle = $(".effect-jazz").eq(1).attr("style");
     $(".effect-jazz:nth-child(even)").attr("style",evenStyle);
     $(".effect-jazz:nth-child(odd)").attr("style",oddStyle);
  }
}
});
}
});

Upvotes: 1

Ravi Delixan
Ravi Delixan

Reputation: 2614

Instead of using inline style, please make it as a class for that, i thought you missed something in the code.

I understand the problem. Please call effect-jazz plugin after appending the content.

Upvotes: 1

Related Questions