jquery无限滚动“重置”

时间:2011-10-29 00:54:11

标签: jquery ajax infinite-scroll jquery-infinite-scroll

我正在为网站(https://github.com/paulirish/infinite-scroll

使用无限滚动jquery插件

一切都很好,只是我的页面是一个搜索所以......发生的事情是:

1)你进入页面,浏览器会自动找到你并给你回复你周围的项目列表(例如吧)...需要无限滚动来避免这个列表的分页。一切都有效,直到这里...除了我能够到达“无限页末尾”并且插件从滚动中“解除绑定”的事实。

2)现在....当您想在输入文本中手动插入地址时,您可以自由地执行此操作...您编写地址,然后按Enter键并使用ajax(没有页面刷新)...我会寻找lat / lon,找到地址,更改无限滚动的导航链接....而且,我觉得愚蠢,但我无法弄清楚将活动“重新激活”或“重新绑定”到活动的方式....所以我的“新搜索结果”没有新的“无限滚动”实例......

(页面“拆分”正确并正确返回json尝试更改“page = NUM​​BER”)

这是控制台中发生的事情:

["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"]

在“unbind”之后,我无法再绑定它,因此我的下一个搜索结果中有无限滚动........

8 个答案:

答案 0 :(得分:27)

infinitescroll通过$.data将所有实例数据存储在元素本身上,因此删除该实例数据是完全重置infinitescroll的唯一可靠方法。

这两行应该干净地摧毁无限卷。

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

//现在无限滚动可以正常重新初始化,而不会在前一个实例中出现任何冲突或残骸。

请注意,截至2012年6月,以前的答案都不适用于我最新版本的jquery.infinitescroll(v2.0)

答案 1 :(得分:5)

解决。

我添加了:

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

在功能

_error: function infscr_error(xhr) {

在第228行。

可能这不是最好的方式,但这正是我所需要的。

我所做的 - 现在 - 基本上就是你的建议:

1

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

2

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

...无需修改“pathParse”值
但那是因为我正在修改选择器(next / nav)
之前,使用jQuery。

答案 2 :(得分:3)

这里没有提到,但是(在我的无限卷轴版本中)你还必须设置两个变量来重新实现InfiniteScroll才能工作。你还必须重新绑定它。这是代码:

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

答案 3 :(得分:3)

在尝试其他解决方案无济于事之后,这对我有用:

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

在文档中引用1/4:http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

答案 4 :(得分:2)

我必须做类似的事情,因为我的代码根据用户操作更新了目标网址,而不仅仅依赖于计数器。

我最终实现了以下重置方法,然后我可以使用$ container('reset');

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

我还实现了一个私有方法来重置悬停消息,否则它会继续提供“不再有页面”的通知。

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

答案 5 :(得分:1)

假设您创建了无限滚动,如:

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

你能不能简单地完全破坏实例:

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

基本上如果你没有定义pathParse,脚本会尝试自己解决它。如果您这样做,它会使用您提供的内容。它不是非常强大,更像是一个黑客而不是任何东西,但改变pathParse目前在无限滚动中并不严格支持。

答案 6 :(得分:1)

项目3)

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

}

没有用。至少有最新版本。砖石抱怨 '在初始化之前不能调用砌体上的方法;试图调用方法'reload''

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

答案 7 :(得分:0)

您可以通过将以下代码添加到无限滚动声明中来实现此目的。

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

请注意,不要在infinitescroll.js文件中,它应该在您的自定义无限滚动声明中。