Using jquery-ias with async-loaded content

Question

I've somewhat successfully integrated the jQuery Infinite Ajax Scroll plugin into my development site - it is used twice, first on the thread list on the left, second when you load up an individual topic - but I'm having trouble with the second ias instance here.

Basically the content of a topic is loaded via $.get and then rendered into the page, and then I trigger setupThreadDetailDownwardScroll() in JS which creates an instance of ias:

var iasDetail = jQuery.ias({
    container:  "#reply-holder",
    item:       ".post",
    pagination: ".threaddetail-pagination",
    next:       ".load-next-inner-link a",
    delay:      2000,
  });

  if (iasDetail.extension) {
    iasDetail.extension(new IASPagingExtension());
    iasDetail.extension(new IASTriggerExtension({
      text: 'More Replies', 
      html: '<div class="scroll-pager"><span>{text}</span></div>',
      offset: 10,
    }));
    iasDetail.extension(new IASNoneLeftExtension({html: '<div class="scroll-message"><span>No more replies</span></div>'}));
    iasDetail.extension(new IASHistoryExtension({
        prev: '.load-previous-inner-link a',
    }));
  }

  iasDetail.on('load', function() {
    $('#reply-holder').append(scrollLoading);
  })

  iasDetail.on('rendered', function() {
    $('.scroll-loading').remove();
    iasDetail.unbind();
  })

But the problem is that this only works with whatever the first topic you load is - you'll get working pagination in the first thread, but then it'll fallback to anchor links when you open the next thread.

So I figured that I needed to rebind ias once this new content is inserted, and this is why I have added the unbind() call in rendered, and then I re-call setupThreadDetailDownwardScroll() whenever another thread is loaded. This doesn't work either though.

Is there a correct procedure here?

I also have an additional problem with the `IASSpinnerExtension` not working with this particular pagination, and also the `IASNoneLeftExtension` - neither of them actually insert any elements into the DOM when using the async load, but they do when you goto a permalink rendering of the same thing, like [this](http://forumbeta.hudsonbelfast.com/post/546/last/) — Matthew Johnston, Apr 27 '14 at 23:52

Fieg · Answer 1 · 2014-05-13T20:05:11.560

0

You are using jQuery.ias(...) which binds to the scroll event of $(window). In your case you probably want to bind to an overflow div. Therefor you should specify the scrollContainer like this:

$('#scrollContainer').ias(...)

Edit:

Based on you comment I took another look at it and might have found an answer. When you call jQuery.ias({...}); IAS gets setup and waits for $(document).ready to initialize. You say you want to initialize IAS in your setupThreadDetailDownwardScroll function. You can try to initialize IAS yourself with the following code

 iasDetail.initialize();

edited May 13 '14 at 20:05

answered May 12 '14 at 19:59

Fieg

3,046
1
16
22

I'm actually already doing something similar to `$('#scrollContainer').ias(...)` for the first scrolling panel on the left of the page, but then I was okay with binding to $(window) for the second (right hand) part because it was scrolling with the window anyway. I did try using the second binding with an overflow div, but couldn't get that to work either (failing in the same ways as above) – Matthew Johnston May 12 '14 at 21:30

Using jquery-ias with async-loaded content

1 Answers1