0

I have a feed section on my website which renders user posts. I have a custom.scss stylesheet which holds all my styling that is loaded when I load my application.

The problem is I have a javascript which fetches more posts upon reaching the bottom of the page. When the script gets more posts the styling doesn't style the posts correctly, on the first retrieval or the second, third etc lot of posts.

I read the asset pipline doc thinking that would give me a answer but didnt here.

I was wondering if anyone knew why my app is doing this, hopefully just something I can include in my script js file or something?

Upon sergio's suggestion my js code.

views/static_pages/home.js.erb

$('#feed').append('<%= escape_javascript render(@feed_items) %>');
$('.pagination').replaceWith('<%= escape_javascript will_paginate(@feed_items) %>');

app/assets/javascripts/endless_scroll.js

$(document).ready(function() {
  if ($('.pagination').length) {
    $('.dynamicdisplaypanel').scroll(function() {
      var url = $('.pagination .next_page').attr('href');
      if (url && $('.dynamicdisplaypanel').scrollTop () >= $('.dynamicdisplaypanel')[0].scrollHeight - $('.dynamicdisplaypanel').height ()) {
        $('.pagination').text("Please Wait...");
        return $.getScript(url);
      }
    });
    return $('.dynamicdisplaypanel').scroll();
  }
});
Lee Eather
  • 345
  • 3
  • 16
  • code? does the AJAX work? does it retrieve the new posts? – Sergio Alen Feb 13 '17 at 05:10
  • yes the jquery works, it gets the posts fine, but when those posts pop up they are all out of whack. I will add my js code. – Lee Eather Feb 13 '17 at 05:12
  • do the elements have the necessary css classes? does the same css apply to the exisitng posts if there's any by default? – Sergio Alen Feb 13 '17 at 05:14
  • Yes, when I LOAD my app the feed shows the posts and they are all styled the way I have set in my custom.scss file. – Lee Eather Feb 13 '17 at 05:17
  • Oh so your, saying that upon retrieval, the CSS is not working. Yes I just tested with the current pagination links which are still there and the styling is fine using pagination. So your saying must be in my js? i think it may be [here](http://stackoverflow.com/questions/17663904/jquery-mobile-css-not-styling-js-inserted-html) where a refresh method is used in the js. – Lee Eather Feb 13 '17 at 05:51
  • Ok so in a test app it is working fine. i will need to test and figure out the glitch and post the problem. Thanks @Sergio Alen – Lee Eather Feb 13 '17 at 06:28

1 Answers1

0

The answer to this question is, that i had the js code in the question, specifically #feed pointing to that <div id="" rather than the <ol class="" inside that div. So the styling went out because the js only returned that div instead of the ol styling when rendering my items.

Lee Eather
  • 345
  • 3
  • 16