Reinitializing jScroll after AJAX call? (Still loading old href after AJAX load)

Question

I'm paginating search results returned from an AJAX call with jScroll:

$('#search').keyup(function() {
    var search = $(this).val();
    $.get('/search', {search : search}, function(results) {
        $('.scroll-table').html(results);
        $('.scroll-table').jscroll();
    });
});

After making a new search, when I scroll to the bottom, jScroll loads the content of the last href for the old search.

So if my old _nextHref was /search?query=A&page=3 and I enter B in the search field, instead of loading /search?query=B&page=2 from the new href, it will load /search?query=A&page=3 from the old href.

Apparently calling jscroll() from the ajax success function won't reconstruct it and _nextHref stays set to its old value. I tried destroying it before loading it, but it will keep it fom loading altogether:

$('#search').keyup(function() {
    var search = $(this).val();

    $('.scroll-table').jscroll.destroy();

    $.get('/search', {search : search}, function(results) {
        $('.scroll-table').html(results);
        $('.scroll-table').jscroll();  /* now jScroll won't load at all */
    });
});

Can you please give me an example how to reinitialize jScroll so it loads the new href?

Gualterio

Answer 1

I found a temporary solution by commenting out the following line:

// if (data && data.initialized) return;

This caused a further problem.. If the result list fits a single page (no pagination needed so there is no href on the first page, "Loading..." is displayed on the bottom of the list, because jScroll wanted to GET "/undefined" from the server. Here is how i fixed it:

// Initialization
if (_nextHref != 'undefined') {
    $e.data('jscroll', $.extend({}, _data, {initialized: true, waiting: false, nextHref: _nextHref}));
    _wrapInnerContent();
    _preloadImage();
    _setBindings();
} else {
    _debug('warn', 'jScroll: nextSelector not found - destroying');
    _destroy();
    return false;
}

I don't know if there is a better way to do this, but now it works with AJAX calls as I expect it to work. If anyone knows of a proper way to reinitialize the plugin, please share it with us.

UPDATE: I created a proper fork of jScroll allowing it to be reinitialized on each AJAX load, preventing it from loading the old href, using:

$('.scroll').jscroll({
    refresh: true
}); 

Hopefully this functionality gets merged in the main version.

Gualterio

I'm glad if u found it useful :) – Gualterio

Answer 2

If you don't want to patch jScroll, you can clear the jScroll data in your load (or get) callback:

var pane = $('#myInfiniteScroll');
pane.load(url, function() {
        pane.data('jscroll', null);
        pane.jscroll({
                    nextSelector: "link[rel='next']",
                    autoTrigger: true,
                  });
    });

When you call the jscroll function, pass the same parameters as when you first initialized it (in this example, I defined two configuration parameters, but use what you need.). Better yet, factor that out into its own function so you don't end up duplicating code.

Foresail

My exact scenario wasn't the same. On page load I was lazy-loading some results using AJAX after the dom was ready and then binding the jScroll plugin. It worked great except when the user added or changed filters I needed a way to start "clean", loading the first page and re-binding the jScroll. By using the .data('jscroll',null) I was able to successfully do that. – Conundrum

I have a pretty different scenario myself : #45036130. – Shelli