Custom trigger, non-automatic infinite scroll not working in version 2

[macsupport]

I am using Infinite scroll with JQuery Isotope and tried the 2.0 beta and find that my triggered infinite scroll breaks with this version. Any hints on making it compatible?

[lukeshumard]

Could you please elaborate on what is not working? It would also help if you could link to a live example or recreate your error on jsfiddle. Thanks.

[lukeshumard]

Since 2.0 isn't actually out and I've gotten a lot of emails about how to do this, I'll go ahead and post the code for how to achieve this with the current 2.0 beta.

$(document).ready(function(){
    
    // set up infinite scroll
    $('#container').infinitescroll({
        // insert your options here
    });
    
    // unbind infinite scroll from automatically
    // fetching the next page
    $('#container').infinitescroll('binding','unbind');
    
    // when the a tag (id 'load-more') is clicked,
    // fetch the next page
    $('#load-more').click(function(e){
        
        e.preventDefault();
        $('#container').infinitescroll('retrieve');

        // the plugin currently sets 'display:none' on your nav selector
        // this is probably going to change, but for the moment, just do this.
        $(this).css('display','block');
        
    });
    
});

[elliterate]

Using the setup code you've supplied, we're experiencing a race condition when hiding/showing the navigation link.

The hide happens in a callback that runs after the loading bar is animated into view. The show happens in the navigation link click handler after the retrieve is triggered (as shown in the above code).

The first time we click the "next" link, the click handler executes the retrieve method—which displays the loading bar, hides the navigation link (the post-loading-bar-animation callback), and triggers the loading of the content—then shows the navigation link. The second time, it executes the retrieve method, then shows the navigation link; only this time the post-loading-bar-animation callback runs after our click handler has finished. In other words, the hide comes after the show and our navigation link never reappears.

To make it work for now, we had to set loadingMsgRevealSpeed to 0. It would seem that really fixing this would mean making this style of infinite scroll a first class feature (specified via an option on initialization). That would allow you to redisplay the navigation link in the AJAX response handler, which is where you'd really want to do that.

[lukeshumard]

Thanks for the in-depth explanation, @elliterate. Can you please provide a link or replicate the issue so we can examine further? Thanks.

[elliterate]

I whipped up a basic test app and put it here: https://github.com/elliterate/infinite_scroll_test. The README should describe how to duplicate the issue and our resolution.

To be clear, I don't actually know if this is the same issue that @macsupport was experiencing. I saw no activity on the issue thread, so I hijacked it.

[lukeshumard]

Thanks for setting that up @elliterate. Is there anyway you could just have a static site that you could link to?

[macsupport]

It seems to work for me now. Here is a test page:
http://macosxsupport.com/infinitescroll/demos/infinite-scroll2.html
I cloned Dave Desandro's Isotope infinite scroll demo and set it up with a link to trigger. ( at the bottom of the page, "load more")

[macsupport]

Sorry, hit the wrong button. Didn't mean to close it!

[lukeshumard]

With loadingStart and loadingEnd you can do whatever you want now, so this is resolved in my book!

@elliterate, I'll install the site over the weekend and make sure this resolves your issue as well, but I have a feeling that..a) it will, and b) that it's something unrelated to what this was started about.