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

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?

Answers


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.


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.


Need Your Help

How to save a copy of XML file when performing any operation on it?

xml vb6 xml-parsing

I am creating a VB6 application, which reads information from an XML file and then copies a particular file to my local workstation. The XML looks something like the below;

Why does the LogCat shows "sqlite returned: error code = 1, msg = no such table: personalInfo"

java android sqlite logcat

I don't understand why there is no such table even though I've already created it through coding. Anyone knows why and can help to solve this problem?