2011-10-29 3 views
13

Я использую бесконечный свиток JQuery плагин для веб-сайта (https://github.com/paulirish/infinite-scroll)JQuery бесконечной прокрутки «сбросить»

Все это хорошо, за исключением, что моя страница является поиск так ... то, что случилось это:

1) вы переходите на страницу, браузер автоматически находит вас и возвращает вам список предметов (например, баров) вокруг вас ... Для того, чтобы избежать разбивки на страницы для этого списка, необходим бесконечный прокрутка. Все работает до сих пор ... кроме того факта, что я мог бы обновить «конец бесконечной страницы», а плагин «отвязывает» себя от свитка.

2) Теперь ... если вы хотите вручную вставить адрес во входной текст, вы можете это сделать ... вы пишете свой адрес и нажмите enter ... и с ajax (no обновление страницы) ... я буду искать lat/lon, найти адрес, изменить навигационную ссылку для бесконечного прокрутки .... и, я чувствую себя немой, НО я не могу понять способ «реактивировать» »или« перевязать »плагин с событием .... Таким образом, мои« новые результаты поиска »не имеют нового экземпляра« бесконечного прокрутки »...

(страница« 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"] 

После того, как «отвязать» я не в состоянии связать его снова и, следовательно, имеют Бесконечные прокрутки на моих следующих результатах поиска ........

ответ

4

Решено.

я добавил:

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

в функции

_error: function infscr_error(xhr) { 

на линии 228.

Возможно, это не самый лучший способ сделать это, но это именно то, что мне нужно.

И что я делать -now- в основном то, что вы предложили:

1.

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

2.

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

... без необходимости внесения изменений в «pathParse "значения
, но это потому, что я изменяю селектор (next/nav)
раньше, с jQuery.

+0

Мне также пришлось прокомментировать эту строку //$(opts.navSelector).hide(); для правильной работы он дал неверные результаты для opts.pixelsFromNavToBottom, поскольку мы скрываем элемент, это не имело значения, если вы создавали плагин один раз, но в нашем случае он создан больше чем и вызывает неправильное значение для пикселейFromNavToBottom –

+0

ПРИМЕЧАНИЕ: это решение больше не работает с июня 2012 года. – fisch0920

0

Предположив вы создали бесконечный свиток, как :

//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"]}); 

Essen если вы не определяете pathParse, скрипт пытается сам это обработать. Если вы это сделаете, он использует то, что вы предоставляете. Его не очень изящный, более взломанный, чем что-либо, кроме изменения pathParse, строго не поддерживается в бесконечном прокрутке на данный момент.

+0

Это не помогло, я до сих пор получил то же самое, никаких новых «.infinitescroll()» ни после «destroy»: - | – ricricucit

+0

Ahh хорошее мышление с функцией removeData(). Я думаю, что это что-то, что нужно включить в функцию уничтожения плагина. Это сложно, потому что вы пытаетесь уничтожить экземпляр из самого экземпляра! – Beaver6813

+0

Этот комментарий связан с моим ответом, но помещен в неправильном месте? : P – ricricucit

3

Здесь не упоминается, но (в любом случае, в моей версии 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'); 
1

Пункт 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'); 
2

Я должен был сделать что-то подобное, так как мой код обновляет 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'); 
    }, 
24

infinitescroll хранит все свои данные экземпляра на самом элемент через $.data, поэтому удаление этих данных экземпляра является единственным безошибочным способом полностью сбросить infinitescroll.

Эти две линии должны выполнять трюк, позволяющий полностью уничтожить бесконечный ход.

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

// теперь бесконечная прокрутка может быть повторно инициализирована, как правило, без каких-либо конфликтов или круто лежащих вокруг предыдущего экземпляра.

ВНИМАНИЕ, что по состоянию на июнь 2012 года, ни один из предыдущих ответов не работал для меня с последней версией jquery.infinitescroll (v2.0)

+5

Я тоже использую v2, и это единственное решение, которое сработало для меня. –

+0

Спасибо, ты спасешь много времени. Большое спасибо ... –

0

вы можете сделать это, просто добавив следующий код в свой бесконечный свиток декларация.

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

Примечание не infinitescroll.js файл, он должен быть в пользовательской бесконечной декларации прокрутки.

Смежные вопросы