Come eseguire lo scroll scroll reset con nuovo contenuto Ajax

Question

Nella mia home page ho un ciclo di post che utilizza lo scroll infinito. Un utente può sostituire quel loop con altri loop usando una ricerca Ajax come Ajax e così via. Il mio problema è che lo scroll infinito funziona solo la prima volta che viene usato, quindi se è attivato per il ciclo principale, non funzionerà più quando un nuovo loop sostituirà il main. Ogni volta che un nuovo ciclo sostituisce il vecchio, viene ricaricata la seguente funzione. Quindi, come faccio a resettare lo scroll infinito e a funzionare ogni volta che viene chiamato un nuovo ciclo?

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

sto utilizzando la versione più recente del 2.0b2.120519 Pual Irish infinite scroll plugin su un sito WordPress.

Answer 1

Non sono sicuro al 100% quale versione di quel plug-in si sta utilizzando, ma ho effettuato il check-in nell'ultima distribuzione ed è necessario eseguire due metodi per farlo funzionare.

Innanzitutto, nella funzione Ajax, è necessario 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'); 
     } 
    }); 
    } 
}); 

Si potrebbe anche fare è una funzione, si legano ad esso, e unbind/rebind invece di ripetere un sacco di codice, ma il codice che ho delineato dovrebbe essere una soluzione di copia + incolla.

Answer 2

penso che ci possa fare questo. nella mia pagina, ho wat per fare clic su un elemento diverso per caricare una pagina diversa.e anche questa pagina può essere infinitescroll. così ho modificare il sorgente di seguito:

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

     // } 

      }); 

ogni volta rimuovo la data e creare un nuovo infinitescroll. quindi ogni volta e ogni elmento è buono.

Answer 3

chiamata

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

spero che funziona

Answer 4

Lavori per la v2.0b.120520

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

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