Yeni ajax içeriğiyle sonsuz kaydırma sıfırlaması nasıl yapılır

Question

Ana sayfamda sonsuz kaydırma kullanan bir gönderi döngüsü var. Bir kullanıcı ajax ajax arama gibi ajax kullanarak bu döngüyü başka döngülerle değiştirebilir. Sorunum sonsuz kaydırma yalnızca ilk kez kullanıldığında, ana döngü için tetiklendiyse, yeni bir döngü ana değiştirdiğinde tekrar çalışmayacak. Yeni bir döngü eskinin yerini her değiştirdiğinde, aşağıdaki işlev yeniden yüklenir. Öyleyse sonsuz kaydırma sıfırlama işlemini nasıl yaparım ve yeni bir döngü çağrıldığında her zaman çalışırım?

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

Ben wordpress sitesinde Pual Irish infinite scroll plugin son sürümünü 2.0b2.120519 kullanıyorum.

Answer 1

Kullanmakta olduğunuz eklentinin hangi sürümüne sahip olduğunuzdan% 100 emin değilim, ancak en son dağıtımı kontrol ettim ve bunu yapmak için iki yöntem uygulamanız gerekiyor.

İlk olarak ajax işlevinizde, destroy the session on success'a ihtiyacınız vardır.

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

Ayrıca buna, bir işlev bağlama yapmak ve unbind/kod yerine bir sürü tekrarlanan rebind ama açıkladık kodu bir kopyası + yapıştır çözüm olabilir ve olmalıdır.

Answer 2

Bunu yapabileceğimi düşünüyorum. Sayfamda , farklı sayfa yüklemek için farklı bir öğeyi tıklatmak için watt. Bu sayfa ayrıca infinitescroll olur.

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

     // } 

      }); 

i tarih kaldırılmasına ve yeni infinitescroll oluşturmak her zaman: bu yüzden aşağıda kaynağını değiştirin. bu yüzden her zaman ve her seçim iyi. Çağrı

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

Answer 3

onun için

Answer 4

Çalışır çalışır Umut v2.0b.120520

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

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