Cách đặt lại cuộn vô hạn với nội dung ajax mới

Question

Trên trang chủ của tôi, tôi có một chuỗi các bài đăng sử dụng cuộn vô hạn. Một người dùng có thể thay thế vòng lặp đó bằng các vòng lặp khác bằng cách sử dụng ajax như tìm kiếm ajax và vân vân. Vấn đề của tôi là cuộn vô hạn chỉ hoạt động lần đầu tiên nó được sử dụng vì vậy nếu nó được kích hoạt cho vòng lặp chính thì nó sẽ không hoạt động trở lại khi một vòng lặp mới thay thế chính. Mỗi lần một vòng lặp mới thay thế cho hàm cũ, hàm sau được tải lại. Vì vậy, làm thế nào để làm cho thiết lập cuộn vô hạn và làm việc mỗi khi một vòng lặp mới được gọi là?

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

Tôi đang sử dụng phiên bản 2.0b2.120519 mới nhất của Pual Irish infinite scroll plugin trên trang web wordpress.

Answer 1

Tôi không chắc chắn 100% phiên bản của plugin bạn đang sử dụng, nhưng tôi đã kiểm tra bản phân phối mới nhất và bạn cần thực hiện hai phương pháp để thực hiện công việc này.

Đầu tiên, trong hàm ajax, bạn cần phải 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'); 
     } 
    }); 
    } 
}); 

Bạn cũng có thể đặt chức năng, liên kết với nó và hủy liên kết/rebind thay vì lặp lại nhiều mã, nhưng mã tôi đã phác thảo phải là giải pháp sao chép + dán.

Answer 2

tôi nghĩ rằng có thể thực hiện việc này. trong trang của tôi, i wat để nhấp vào phần tử khác nhau để tải trang khác. Và trang này cũng là infinitescroll. vì vậy, tôi sửa đổi nguồn bên dưới:

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

     // } 

      }); 

mỗi khi tôi xóa ngày và tạo một infinitescroll mới. vì vậy mọi thời gian và mọi elment đều tốt.

Answer 3

gọi

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

Hy vọng nó hoạt động

Answer 4

trình cho v2.0b.120520

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

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