Подтвердить что ты не робот

Jquery бесконечная прокрутка "reset"

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

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

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

2) Теперь... когда вы хотите вручную вставить адрес во входной текст, вы можете это сделать... вы пишете свой адрес и нажмите enter... и с ajax (не обновлять страницу)... Я буду искать 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"]

После "unbind" я не могу связать его снова и, следовательно, иметь бесконечную прокрутку при следующих результатах поиска........

4b9b3361

Ответ 1

решаемые.

Я добавил:

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

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

Эти две строки должны делать трюк с чисто разрушающим бесконечным колесом.

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

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

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

Ответ 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');

Ответ 5

Мне нужно было сделать что-то подобное, так как мой код обновляет URL-адрес назначения в зависимости от действия пользователя, а не просто полагается на счетчик.

Я закончил реализацию следующего метода reset, который затем могу вызвать с помощью $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');
    },

Я также применил частный метод для reset сообщения hover, поскольку в противном случае он продолжал бы уведомлять "больше страниц".

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

Ответ 6

Пункт 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

Предполагая, что вы создали бесконечную прокрутку, например:

//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, script пытается сам это обработать. Если вы это сделаете, он использует то, что вы предоставляете. Его не очень элегантное, более взломанное, чем что-либо, но изменение pathParse строго не поддерживается в бесконечном прокрутке на данный момент.

Ответ 8

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

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

Обратите внимание не на файл infinitescroll.js, он должен быть в вашем объявлении с неограниченным прокруткой.