Wie man einen unendlichen Scroll-Reset mit neuem Ajax-Inhalt macht

Question

Auf meiner Homepage habe ich eine Schleife von Posts, die unendlich scroll verwendet. Ein Benutzer kann diese Schleife mit anderen Schleifen ersetzen, indem er Ajax wie Ajax-Suche verwendet und so weiter. Mein Problem ist, dass das unendliche Scrollen nur beim ersten Mal funktioniert. Wenn es also für die Hauptschleife ausgelöst wird, funktioniert es nicht mehr, wenn eine neue Schleife die Hauptschleife ersetzt. Jedes Mal, wenn eine neue Schleife die alte ersetzt, wird die folgende Funktion neu geladen. Also, wie mache ich unendliche Scroll-Reset und Arbeit jedes Mal, wenn eine neue Schleife aufgerufen wird?

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

Ich verwende die neueste Version 2.0b2.120519 der Pual Irish infinite scroll plugin auf einer Wordpress-Seite.

Answer 1

Ich bin nicht 100% sicher, welche Version des Plugins Sie verwenden, aber ich habe in die neueste Distribution eingecheckt und Sie müssen zwei Methoden ausführen, um dies zu arbeiten.

Zuerst müssen Sie in Ihrer Ajax-Funktion 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'); 
     } 
    }); 
    } 
}); 

Sie könnten es auch eine Funktion machen, binden sich an sie, und unbind/rebind stattdessen eine Menge Code zu wiederholen, aber der Code, den ich skizziert habe sollte eine Kopie + Paste Lösung sein.

Answer 2

Ich denke, dass es das tun kann. in meiner Seite, ich wat, um unterschiedliches Element zu klicken, um unterschiedliche page.and diese Seite auch infinitescroll zu laden. so ändern i die Quelle unter:

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

     // } 

      }); 

jedes Mal, wenn ich das Datum entfernen und eine neue infinitescroll erstellen. Also jedes Mal und jeder Elment ist gut.

Answer 3

Anruf

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

Hoffe, es funktioniert

Answer 4

Werke für v2.0b.120520

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

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