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?

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.

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.