Geek asks and answers

How to make endless scroll reset with new ajax content

On my homepage, I have a message loop that uses infinite scrolling. The user can replace this loop with other loops using ajax, for example, an ajax search, and so on. My problem is scrolling endlessly, it only works the first time it starts for the main loop, then it won't work again when the new loop replaces the main one. Each time a new cycle replaces the old, the next function is reloaded. So, how do I do an endless 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 am using the latest version 2.0b2.120519 of the Pual Irish infinite scroll plugin on the wordpress site.

+5
4

100%, , , , .

-, ajax 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');
      }
    });
  }
});

, /, , , , + .

+3

, . , . . :

       // 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));

         //    }

            });

, . .

+1

v2.0b.120520

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

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

+1

$('#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');
      }
    });

, .

0
source

More articles:


All Articles