jquery infinite scroll "reset"

Question

I'm using the infinite scroll jquery plugin for a website ( https://github.com/paulirish/infinite-scroll )

Everything is fine except that my page is a search so...what happen is:

1) you go on the page, browser auto-locates you and give you back a list of items (eg. bars) around you...Infinite scroll is needed to avoid pagination for this list. Everything works until here...except the fact that i could reache the "end-of-the-infinite-page" and the plugin "unbinds" itself from the scroll.

2) Now....when you want to manually insert an address in the input text, you are free to do it...you write your address, and press enter...and with ajax (no page refresh)...i'll look for lat/lon, locate the address, change the navigation link for the infinite scroll....and,i feel dumb, BUT i can't figure out a way to "reactivate" or "re-bind" the plugin to the event....So my "new search results" do not have a fresh "infinite scroll" instance...

(page "split" correctly and correctly returns a json trying changing "page=NUMBER")

This is what happens in the console:

["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"]

After the "unbind" i'm not able to bind it again and therefore have the infinit scroll on my next search results........

Answer 1

infinitescroll stores all of its instance data on the element itself via $.data, so removing that instance data is the only sure-fire way to totally reset infinitescroll.

These two lines should do the trick of cleanly destroying infinitescroll.

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

// now infinite scroll may be reinitialized normally without any conflicts or cruft lying around from the previous instance.

NOTE that as of June 2012, none of the previous answers worked for me with the latest version of jquery.infinitescroll (v2.0)

Answer 2

Solved.

i've added:

if (xhr == 'destroy') {
    $.removeData(this.element[0]);
}

in function

_error: function infscr_error(xhr) {

on line 228.

Probably that's not the best way of doing this, but it's exactly what i needed.

And what i do -now- is basically what you suggested:

1.

$("#myelement").infinitescroll("destroy");

2.

$("#myelement").infinitescroll(WHATEVER_SETTINGS);

...without the need to modify the "pathParse" values
but that's because i'm modifying the selectors (next/nav)
before, with jQuery.

Answer 3

It isn't mentioned here, but (in my version of Infinite Scroll anyway) you also have to set two variables for the re-instantiaion of InfiniteScroll to work. You also have to Rebind it. Here is the code:

$('#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');

Answer 4

After trying the other solutions to no avail, this worked for me:

$(window).unbind('.infscr');

Reference 1/4 down the docs: http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/