How to make infinite scroll reset with new ajax content

Question

On my homepage I have a loop of posts that uses infinite scroll. A user can replace that loop with other loops using ajax like ajax search and so on. My issue is the infinite scroll only works the first time it's used so if it's triggered for the main loop then it won't work again when a new loop replaces the main. Each time a new loop replaces the old the following function is reloaded. So how do I make infinite scroll reset and work every time a new loop is called?

var href = 'first';
$(document).ready(function() {
    $('#boxes').infinitescroll({
        navSelector: '.infinitescroll',
        nextSelector: '.infinitescroll a',
        itemSelector: '#boxes .box',
        loadingImg: '<?php echo get_bloginfo('stylesheet_directory') ?>/images/loading.gif',
        loadingText: 'Loading...',
        donetext: 'No more pages to load.',
        debug: false
    }, function(arrayOfNewElems) {
        $('#boxes').masonry('appended', $(arrayOfNewElems));
        if(href != $('.infinitescroll a').attr('href')) {
            href = $('.infinitescroll a').attr('href');
        }
    });
});

I'm using the latest version 2.0b2.120519 of the Pual Irish infinite scroll plugin on a wordpress site.

Franzoni

Is it possible to see a live example of your code breaking? – Chintzy

It's a beta site behind closed doors but I left a link for you in js chat. – Franzoni

Answer 1

I'm not 100% sure which version of that plugin you're using, but I checked into the latest distribution and you need to perform two methods to make this work.

First, in your ajax function, you need to destroy the session on success.

$.ajax({
  url: 'path/to/something.ext',
  success: function(data){
    //call the method to destroy the current infinitescroll session.
    $('#boxes').infinitescroll('destroy');

    //insert the new data into the container from the_loop() call
    $('#boxes').html(data);

    //reinstantiate the container
    $('#boxes').infinitescroll({                      
      state: {                                              
        isDestroyed: false,
        isDone: false                           
      }
    });

    //call the methods you need on the container again.
    $('#boxes').infinitescroll({
      navSelector: '.infinitescroll',
      nextSelector: '.infinitescroll a',
      itemSelector: '#boxes .box',
      loadingImg: '<?php echo get_bloginfo('stylesheet_directory') ?>/images/loading.gif',
      loadingText: 'Loading...',
      donetext: 'No more pages to load.',
      debug: false
    }, function(arrayOfNewElems) {
      $('#boxes').masonry('appended', $(arrayOfNewElems));
      if(href != $('.infinitescroll a').attr('href')) {
        href = $('.infinitescroll a').attr('href');
      }
    });
  }
});

You could also make it a function, bind to it, and unbind/rebind instead of repeating alot of code, but the code I've outlined should be a copy+ paste solution.

Seifert

I had seen this solution but couldn't get it to work. What is the path suppose to be to and are you not suppose to use document ready for this? – Franzoni

Hi @Seifert I'm trying to use your script but on debugging I get a 'Uncaught TypeError: Cannot call method 'appendTo' of null'. I'm 1000% sure that the divs I'm calling are there. Do you know if this code would work with the latest version? Thank you! – Soubriquet

@Soubriquet Hello. When you receive an error about jQuery not being able to call a method on "null", it means that your selector failed. In whatever capacity that may be. Can you show me what your selector is for your appendTo() briefly? – Seifert

Hi @Seifert thanks for answering, I ended solving this with the link posted below on this post: powerhour.at/devblog/… Thanks a lot!!! – Soubriquet

Answer 2

i think there can do this. in my page,i wat to click different element to load different page.and these page also be infinitescroll. so i modify the source below:

       // creation 
        case 'object':

            this.each(function () {

                var instance = $.data(this, 'infinitescroll');

            /*   if (instance) {

                    // update options of current instance
                    instance.update(options);

                } else {
             */
                $(this).removeData("infinitescroll");

                // initialize new instance
                 $.data(this, 'infinitescroll', new $.infinitescroll(options, callback, this));

         //    }

            });

every time i remove the date and create a new infinitescroll. so every time and every elment is good.

Intine

Answer 3

Works for v2.0b.120520

$('#boxes').infinitescroll('binding','unbind');
$('#boxes').data('infinitescroll', null);

Credit: http://www.powerhour.at/devblog/reset-jquery-infinitescroll-after-ajax-call/

Islam

Answer 4

call

$('#boxes').infinitescroll({                      
                state: {                                              
                  isDuringAjax: false,
                    isInvalidPage: false,
            isDestroyed: false,
            isDone: false, // For when it goes all the way through the archive.
            isPaused: false,
            currPage: 1

                }
            });
then 
$('#boxes').infinitescroll({
      navSelector: '.infinitescroll',
      nextSelector: '.infinitescroll a',
      itemSelector: '#boxes .box',
      loadingImg: '<?php echo get_bloginfo('stylesheet_directory') ?>/images/loading.gif',
      loadingText: 'Loading...',
      donetext: 'No more pages to load.',
      debug: false
    }, function(arrayOfNewElems) {
      $('#boxes').masonry('appended', $(arrayOfNewElems));
      if(href != $('.infinitescroll a').attr('href')) {
        href = $('.infinitescroll a').attr('href');
      }
    });

Hope it works

Varuna

Your answer would be considerably better if you could explain why it should work. – Td