0

I am using infinate scroll plugin (by Paul Irish). I want to use custom functions when the next page is loading and when the maxPage is reached.

I have tried the below based on the documentation, however this starts the loading function but doesn't ever call the finished function. Its not calling the next page either when I look in the console. What am I missing?

    // Infinite Ajax Scroll configuration
    $container.infinitescroll({
        navSelector: "div.paginate",
        nextSelector: "div.paginate a",
        itemSelector: "div.element",
        maxPage: 5,
        loading: {
            start: function(){
                  alert('started');
            },
            finished: function(){
                  alert('finsihed loading');
            }
        }
    },
    function(newElements) {

        var $newElements = $(newElements).css({opacity: 0});
        //remove the first item
        $newElements.splice(0, 1);

            $container.isotope('appended', $newElements);

        }

    });
});

The scrolling could go on for pages and pages until the browser crashes due to memory issues, I therefore need to stop infinite scrolling when the current page gets to maxPage and allow the user to select a "Load More" button. Hopefully solving memory issues.

This is discussed in the link below but I cannot find any further documentation on how to do this exactly and cann't even get the above sample to work.

https://github.com/paulirish/infinite-scroll/issues/300

LeeTee
  • 6,401
  • 16
  • 79
  • 139
  • What does ajaxLoader do? – Matt Jan 22 '14 at 18:35
  • What version of jquery.infinitescroll.js are you using? It seems the options changed as of v2.0. – Owlvark Jan 22 '14 at 18:35
  • Im using the latest version,2.0b2.120519. – LeeTee Jan 22 '14 at 18:45
  • ajaloader disables all links and mouseovers and displays a loading image – LeeTee Jan 22 '14 at 18:46
  • please fix errors in your code example, you have an extra } inside the infinitescroll parentheses – Jaak Kütt Jan 25 '14 at 22:17
  • Does the `start` alert trigger on every page? If so you might be open to implement an own solution with counting a variable up and using an `if` or so? I would detail that in an answer... :) – loveNoHate Jan 29 '14 at 12:54
  • The start function triggers when I first start to scroll the page then it doesn't do the ajax call, it isnt calling the next page when I look in the console. if I remove the start function, it does call the next page. – LeeTee Jan 29 '14 at 13:32

1 Answers1

0

First, ensure it works will the minimum options (plus console debug messages):

$container.infinitescroll({
    navSelector: "div.paginate",
    nextSelector: "div.paginate a",
    itemSelector: "div.element",
    debug: true
});

If it does, add in options until it breaks.

I recommend debugging the start/finished functions in the console, like this:

    loading: {
        start: function(){
              console.log('started');
        },
        finished: function(){
              console.log('finsihed loading');
        }
    }

Consider adding the errorCallback option to debug ajax issues.

Owlvark
  • 1,763
  • 17
  • 28
  • It doesn't make any difference. I have added alerts in the start and finish functions. The start one alerts but the finish one doesn't. It isnt calling the next page when I look in the console. See changes above – LeeTee Jan 22 '14 at 19:39
  • Could it be the missing comma between `start` and `finished`? – Owlvark Jan 22 '14 at 19:49
  • there is a comma, sorry I just hadn't added it above, Its there now! – LeeTee Jan 22 '14 at 19:52
  • No errors, I just get the following: ["determinePath", ["index.php?p=", "&curr=GBP"]] jquery...roll.js (line 241) pixelsFromNavToBottom: 70.4000244140625 jquery...roll.js (line 239) ["Binding", "bind"] jquery...roll.js (line 241) ["math:", 0, 70.4000244140625] – LeeTee Jan 22 '14 at 20:34
  • Hmm, there may be a problem with the `nextSelector`. What is the href of `div.paginate a`? And is there only one `a`? You may have to use `a:first`. – Owlvark Jan 22 '14 at 21:08
  • I dont think it is that as it all works fine using the default loading images. It stopped loading when I changed the defaults to use custom functions. There isn't much documentation on this... – LeeTee Jan 22 '14 at 21:19
  • If you say so. It just looks like your path is an array rather than a string, is all. – Owlvark Jan 22 '14 at 21:29