jQuery бесконечная прокрутка "сброс"
Я использую плагин infinite scroll jquery для веб-сайта (https://github.com/paulirish/infinite-scroll)
все в порядке, за исключением того, что моя страница-это поиск...что происходит:
1) вы идете на страницу, браузер автоматически находит вас и возвращает вам список элементов (например. Бары) вокруг вас...Бесконечная прокрутка необходима, чтобы избежать разбиения на страницы для этого списка. Все работает до сих пор...за исключением того, что я мог достичь "конец бесконечной страницы "и плагин" развязывает " себя от свитка.
2) сейчас....если вы хотите вручную вставить адрес во входной текст,вы можете это сделать...вы пишете свой адрес и нажимаете enter...и с ajax (нет обновите страницу)...я буду искать lat / lon, найти адрес, изменить навигационную ссылку для бесконечной прокрутки....и я чувствую себя глупо, но я не могу понять, как "реактивировать" или "повторно привязать" плагин к событию....So my " new Результаты поиска "не имеют свежего экземпляра" infinite scroll"...
(страница "split" правильно и правильно возвращает json, пытающийся изменить "page=NUMBER")
вот что происходит в консоли:
["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 ответов
infinitescroll хранит все свои данные экземпляра на самом элементе via $.data
, поэтому удаление этих данных экземпляра-единственный верный способ полностью сбросить infinitescroll.
эти две строки должны сделать трюк чистого уничтожения infinitescroll.
$elem.infinitescroll('destroy');
$elem.data('infinitescroll', null);
/ / теперь infinite scroll может быть повторно инициализирован обычно без каких-либо конфликтов или cruft, лежащих вокруг предыдущего экземпляра.
обратите внимание, что по состоянию на июнь 2012 года предыдущие ответы работали для меня с последней версией jquery.infinitescroll (v2.0)
решена.
Я добавил:
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.
это не упоминается здесь, но (в моей версии Infinite Scroll в любом случае) вы также должны установить две переменные для повторного создания 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');
после попытки других решений безрезультатно, это сработало для меня:
$(window).unbind('.infscr');
ссылка 1/4 вниз по документам:http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
мне пришлось сделать что-то подобное, так как мой код обновляет url-адрес назначения в зависимости от действия пользователя, а не просто полагается на счетчик.
Я закончил реализацию следующего метода сброса, который я могу вызвать с помощью $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');
},
предполагая, что вы создали бесконечный свиток, как:
//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 строго не поддерживается в infinite-scroll на данный момент.
пункт 3)
if (xhr == 'destroy') {
$.removeData(this.element[0]);
}
не работал. По крайней мере с последней версией. Кладка жалуется "не удается вызвать методы кладки до инициализации; попытка вызвать метод "перезагрузить"
$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');
вы можете сделать это, просто добавив следующий код в объявление бесконечной прокрутки.
errorCallback : function() {
isc.getContainer().infinitescroll('destroy');
$.removeData(this);
},
Примечание не в infinitescroll.JS-файл, он должен быть в вашем пользовательском объявлении бесконечной прокрутки.