Change option and reinitialize

Question

I am using jscroll as an infinite scroll pager.

$j('.frontpage').jscroll({
    loadingHtml: '<div style="text-align: center;"><img width="50" src="ring-alt-1.gif" alt="Loading" /></div>',
    padding: 20,
    nextSelector: 'div.next a',
    contentSelector: '.latest-container',
    autoTrigger: true,
    autoTriggerUntil: 1
});

This is a pretty neat plugin and it uses the must-have for my project autoTriggerUntil. Using that method you can limit the times that the content loads automatic and show the pagination's "next" button.

What I am trying to achieve is this.

1. Load the first set of posts (actually the 2nd page) with infinite. (DONE)
2. After the 2nd page, show a "Load All" button. (DONE)
3. Both 1 and 2 work but what I am trying to do is this: After clicking the "Load All" on page 2, I want to destroy the limiter and get back to an infinite view until the end.

I basically need to reinitialize this somehow. I have been messing with intervals and other bad practices the last couple of hours with no results.

Answer 1

After digging I came out with this solution:-

first, you need to add a callback function like this:-

$('.frontpage').jscroll({
    //your existing settings ,
    callback: function() {
      if ($('div.next a').is(":visible")) {
         $('.frontpage').jscroll.destroy();
         $('div.next a').off('click');
       }
    }
});

Second Add onclick attribute to the load All a tag (only in the page where the load all a tag is visible)

onclick="loadAllClick(event);"

and the handler function should be like this:-

  <script>
      var loadAllClick = function(e) {
           e.preventDefault();
           $('.frontpage').jscroll( //your settings 
                               );
          }
  </script>

and Here is a fully working plunker sample Hope this answers your question

Answer 2

You can use the $(el).off() method and the plugin's callback option.

Tested on the plugin page http://jscroll.com/.

It can look something like this:

var counter = 0;
function scrollerCallback(){
  counter++;
  if(counter<2){return;}
    var el = $j('div.next a'); //Your 'next' selector
    el.off()
    el.on('click',function(e){
      e.preventDefault(); // we don't want the browser to go to redirect
      // Add your code to show the rest of the comments here.
  });
}

And then call bind the same way but add callback:

$j('.frontpage').jscroll({
    loadingHtml: '<div style="text-align: center;"><img width="50" src="ring-alt-1.gif" alt="Loading" /></div>',
    ...
    callback:scrollerCallback,
    autoTriggerUntil: 1
});