Multiple instances of Infinite Scroll fails to seperate more-link
I am using multiple instances of Infinite Scroll and had to make the following change to the Infinite.js to make it work:
In Infinite.js
Changed line 21 from
this.$more = $(this.options.more)
to
this.$more = $(this.options.more, this.$container)
Changed line 35 from
$.get($(this.options.more).attr('href'), $.proxy(function (data) {
to
$.get(this.$more.attr('href'), $.proxy(function (data) {
This adds context to the more link search and thus confines more-links to their containers
Hi madsbrydegaard, did you change the class name of your more-links to make it work?
Hi madsbrydegaard, did you change the class name of your more-links to make it work?
No I just checked - they are set to default:
class="infinite-more-link"
oh ok thanks a lot for the quick answer! I managed to change mines using for example: more: '.infinite-more-link-xx', May I ask you how you handled the pagination? Let say you have 2 lists, 2 waypoints. Do you have pass the two page numbers everytime? e.g. how do you keep up to date the first one when loading the second one.
ok ignore I managed to fix it If it helps someone: one page param is enough in the more link here are the options I had to specify when creating the waypoint
var infinite2 = new Waypoint.Infinite({ element: $('.infinite-container-applications'), more: '.infinite-more-link-applications', items: '.infinite-item-applications', onBeforePageLoad: function () { $('.loading-applications').show(); }, onAfterPageLoad: function ($items) { $('.loading-applications').hide(); } });