Reinitializing jScroll after AJAX call? Still loading old values after AJAX load.

[orszaczky]

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

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

After getting the new set of search results, when I scroll to the bottom, jScroll appends content of the next page of the previous (old) query.

So if my last _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.

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

[orszaczky]

I found a temporary solution by commenting out the following line: // if (data && data.initialized) return;

[orszaczky]

However this created another 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.

[orszaczky]

The Loading... html was displayed 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.