jquery cuộn vô hạn "thiết lập lại"

Question

Tôi đang sử dụng plugin cuộn jquery vô hạn cho một trang web()

Mọi thứ đều tốt ngoại trừ việc trang của tôi là một tìm kiếm như vậy ... những gì xảy ra là:

1) bạn đi trên trang, trình duyệt tự động định vị bạn và cung cấp cho bạn danh sách các mục (ví dụ: thanh) xung quanh bạn ... Cuộn vô hạn là cần thiết để tránh phân trang cho danh sách này. Tất cả mọi thứ hoạt động cho đến đây ... ngoại trừ thực tế là tôi có thể tiếp cận "trang cuối cùng vô hạn" và plugin "tự hủy" chính nó khỏi cuộn.

2) Bây giờ .... khi bạn muốn chèn địa chỉ vào văn bản nhập theo cách thủ công, bạn được tự do làm điều đó ... bạn viết địa chỉ của bạn và nhấn enter ... và với ajax (không làm mới trang) ... tôi sẽ tìm lat/lon, tìm địa chỉ, thay đổi liên kết điều hướng cho cuộn vô hạn .... và, tôi cảm thấy câm, NHƯNG tôi không thể tìm ra cách để "kích hoạt lại "hoặc" liên kết lại "plugin cho sự kiện .... Vì vậy," kết quả tìm kiếm mới "của tôi không có một trường hợp" cuộn vô hạn "mới ...

(trang" chia nhỏ "một cách chính xác và trả về chính xác json đang thử thay đổi "trang = NUMBER")

Đây là những gì xảy ra trong bảng điều khiển:

["math:", 0, 468] 
jquery.infinitescroll.min.js:20["heading into ajax", 
Array[2] 
    0 : "/ajax/getCoworkings/?page=" 
    1 : "&latitude=52.5234051&longitude=13.4113999&distance=12" 
    length : 2 
    __proto__ : Array[0] 
] 
jquery.infinitescroll.min.js:20["Using JSON via $.ajax() method"] 
jquery.infinitescroll.min.js:20["Error", "end"] 
jquery.infinitescroll.min.js:20["Binding", "unbind"] 

Sau khi "unbind" Tôi không thể để ràng buộc nó một lần nữa và do đó có cuộn infinit trên kết quả tìm kiếm tiếp theo của tôi ........

Answer 1

Đã giải quyết.

tôi đã thêm:

if (xhr == 'destroy') { 
    $.removeData(this.element[0]); 
} 

chức năng

_error: function infscr_error(xhr) { 

on line 228.

Có lẽ đó không phải là cách tốt nhất để làm điều này, nhưng đó là chính xác những gì tôi cần.

Và những gì tôi làm -now- về cơ bản là những gì bạn đề nghị:

1.

$("#myelement").infinitescroll("destroy"); 

2.

$("#myelement").infinitescroll(WHATEVER_SETTINGS); 

... mà không cần phải thay đổi "pathParse "các giá trị
nhưng đó là vì tôi đang sửa đổi các bộ chọn (tiếp theo/nav)
trước đây, với jQuery.

Answer 2

Giả sử bạn đã tạo cuộn vô hạn như :

//This will initiate with default values for example purpose 
$("#myelement").infinitescroll(); 

thể bạn không sau đó chỉ cần hoàn toàn phá hủy dụ:

$("#myelement").infinitescroll("destroy"); 
//Reset anything else that may cause the page to blow up here 
//And then create a new instance with different path variables: 
//Note, obviously you'll be initializing it with custom selectors/settings etc so include those as well 
$("#myelement").infinitescroll({pathParse:["/ajax/getCoworkings/?page=","&latitude=52.5234051&longitude=13.4113999&distance=12"]}); 

Essentia Nếu bạn không định nghĩa pathParse, kịch bản sẽ cố gắng tự làm việc đó. Nếu bạn làm vậy thì nó sử dụng những gì bạn cung cấp. Nó không phải là rất sang trọng, nhiều hơn một hack hơn bất cứ điều gì, nhưng thay đổi pathParse không được hỗ trợ nghiêm ngặt trong vô hạn cuộn vào lúc này.

Answer 3

Nó không được đề cập ở đây, nhưng (trong phiên bản của Infinite Scroll của tôi anyway) bạn cũng phải thiết lập hai biến cho reest instantiaion của InfiniteScroll để làm việc. Bạn cũng phải Rebind nó. Đây là mã:

$('#cardContainer').infinitescroll('destroy'); // Destroy 

// Undestroy 
$('#myContainer').infinitescroll({      
    state: {            
     isDestroyed: false, 
     isDone: false       
} 
}); 

InitInfiniteScroll(); // This is a wrapper for the standard initialization you need 

// Re-initialize 
$('#myContainer').infinitescroll('bind'); 

Answer 4

Mục 3)

if (xhr == 'destroy') { 
    $.removeData(this.element[0]); 

}

Đã không làm việc là tốt. Ít nhất với phiên bản mới nhất. Các masonry phàn nàn về 'không thể gọi phương pháp trên nề trước khi khởi tạo; đã cố gắng gọi phương thức 'tải lại' '

$container.css('display','none'); 
$container.html(htmlOutput).imagesLoaded(function(){ 
      $container.css('display','block'); 
      $container.masonry('reload'); 
}); 

// I have to do this in order to "reset" the stage 
$container.infinitescroll('destroy'); // Destroy 

// Undestroy 
$container.infinitescroll({      
    state: { 
     isDestroyed: false, 
     isDone: false 
    } 
}); 

// Init. 
$container.infinitescroll({ 
    navSelector : '#page-nav', // selector for the paged navigation 
    nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) 
    itemSelector : '.tile',  // selector for all items you'll retrieve 
    loading: { 
    finishedMsg: '', 
    msgText: '', 
    img: url + 'img/ajax-loader.gif' 
    } 
}, 
// trigger Masonry as a callback 
function(newElements) { 
    // hide new items while they are loading 
    var $newElems = $(newElements).css({ opacity: 0 }); 
    // ensure that images load before adding to masonry layout 
    $newElems.imagesLoaded(function(){ 
     // show elems now they're ready 
     $newElems.animate({ opacity: 1 }); 
     $container.append($newElems).masonry('appended', $newElems, true); 
    }); 
} 
); 

// Re-initialize 
$container.infinitescroll('bind'); 

Answer 5

Tôi đã phải làm điều gì đó tương tự vì mã của tôi cập nhật url đích tùy thuộc vào hành động của người dùng thay vì chỉ dựa vào bộ đếm.

Tôi đã kết thúc triển khai phương pháp đặt lại sau mà tôi có thể gọi bằng cách sử dụng $ container ('đặt lại');

reset: function infrscr_reset() { 
     this.options.state.isDone = false; 
     this.options.state.isDuringAjax = false; // I needed this, others may not 
     this._resetmsg(); 
     this._binding('bind'); 
    }, 

Tôi cũng đã triển khai phương pháp riêng để đặt lại thông báo di chuột vì nếu không nó sẽ tiếp tục cung cấp thông báo "không có trang" nữa.

_resetmsg: function infscr_resetmsg() { 
     var opts = this.options; 
     opts.loading.msg = $('<div id="infscr-loading"><img alt="Loading..." src="' + opts.loading.img + '" /><div>' + opts.loading.msgText + '</div></div>'); 
     this._debug('Reset loading message'); 
    }, 

Answer 6

cửa hàng infinitescroll tất cả dữ liệu cá thể của nó trên các yếu tố tự qua $.data, vì vậy loại bỏ dữ liệu ví dụ là chỉ chắc chắn lửa cách để hoàn toàn khôi phục infinitescroll.

Hai dòng này phải thực hiện mẹo xóa sạch infinitescroll.

$elem.infinitescroll('destroy'); 
$elem.data('infinitescroll', null); 

// cuộn vô hạn có thể được khởi tạo lại bình thường mà không có bất kỳ xung đột hoặc tuần hoàn nào nằm xung quanh từ ví dụ trước.

Chú ý rằng tính đến tháng 6 năm 2012, không ai trong số các câu trả lời trước làm việc cho tôi với phiên bản mới nhất của jquery.infinitescroll (v2.0)

Answer 7

bạn có thể làm điều này bởi chỉ cần thêm đoạn mã sau vào cuộn vô hạn của bạn tờ khai.

errorCallback : function() { 
    isc.getContainer().infinitescroll('destroy'); 
    $.removeData(this); 
}, 

Lưu ý không trong tập tin infinitescroll.js, nó phải là trong tuyên bố cuộn vô hạn tùy chỉnh của bạn.

Answer 8

Sau khi thử các giải pháp khác không có kết quả, điều này đã làm việc cho tôi:

$(window).unbind('.infscr'); 

Reference 1/4 xuống các tài liệu: http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/