Multi instance in one page #93

sama55 opened this Issue Oct 1, 2013 · 28 comments


None yet
sama55 commented Oct 1, 2013

Thank you great plugin. There are multiple page-navigation on "one" page in my site. It works almost well. However, I have one problem. Trigger tag (.ias_trigger ["Load more items"]) of B instance disappears by $(window) scroll of A.

"scrollContainer" of A instance: $(window)
"scrollContainer" of B instance: $('Unique ID')

It seems that trigger tag of IAS has CLASS (.ias_trigger) not ID.

Question1: Is the multiple instance impossible in one page?
Question2: Can I deal by onScroll() callback?

Best regards.



I've got same problem. On my website I have more than one containers with their own pagination.
Is it possible to use Your plugin in such case.

Best regards

fieg commented Jan 27, 2014

Seems like a bug to me. This should be possible.


Any update regarding this issue? I also noticed that Trigger button of Container A disappears when the page loads items of Container B (on the same page).

rjgamer commented Mar 26, 2014

Any update or workaround out there for this problem?

fieg commented Mar 26, 2014

I think the latest version (v2) should have fixed this. Can someone confirm this?

@fieg fieg closed this Mar 28, 2014
rjgamer commented May 2, 2014

The problem is not fixed. If you have different called containers and items.

fieg commented May 2, 2014

Can you send me an url where the problem occurs?

rjgamer commented May 5, 2014

i'm using a workaround but here is the url:

If you have to pages with infinite ajax scroll, one for listing games and one for news then the problem exists. The problem appears if you initialize the infinte ajax scroll in your main javascript file which will be loaded on every page, then the first initilization will be overwritten.

    var gamesIAS = jQuery.ias({
        container: '.games',
        item: '.game',
        pagination: '#pagination',
        next: '.next',
        delay: 200
    gamesIAS.on('rendered', function() {
    gamesIAS.extension(new IASSpinnerExtension());
    gamesIAS.extension(new IASNoneLeftExtension({
        text: 'Keine weiteren Games vorhanden',
    gamesIAS.extension(new IASTriggerExtension({
        text: 'Weitere Games laden...',

    var ias = jQuery.ias({
        container: '.news',
        item: '.news-article',
        pagination: '#pagination',
        next: '.next',
        delay: 200
    ias.extension(new IASSpinnerExtension());
    ias.extension(new IASNoneLeftExtension({
        text: 'Keine weiteren News vorhanden'
    ias.extension(new IASTriggerExtension({
        text: 'Weitere News laden...'

My workaround is to wrap each initialization with a "check if list exist"-statement like:

    if ($(".gamelist-news").length > 0) {
fieg commented May 7, 2014

Great, that clarifies a lot, I will look into it some time soon.

@fieg fieg reopened this May 7, 2014
@fieg fieg added the Critical label May 18, 2014
@kop kop referenced this issue in kop/yii2-scroll-pager Jul 29, 2014

Work with severall ListViews #10


Hello @fleg. Any progress on this or idea of when you might be able to resolve? I have about a month before i have to complete a project and would really like to use infinite-ajax-scroll through kop's yii2 extension.

fieg commented Sep 15, 2014

Hi @drawlusyk, sorry no progress yet on this issue. Also can't give you an estimate :(


This issue also extends into websites that uses AJAX loading like jQuery-Pjax. Because the DOM is not reset, the IAS bindings and variables are persisted across pages.

So far I've been able to mitigate most issues by unbinding and resetting the IAS data with this

$(document).one('pjax:popstate pjax:beforeReplace', function (e) {
    // navigating away from page
    $.ias().unbind(); // unbind window scroll event handler
    $(window).removeData('ias'); // remove current ias data stored in window

Unfortunately this only unbinds the window scroll handler (which is the most problematic) but it does nothing for the extensions that have been registered or the extension settings. This is where settings will overwrite each other (if you have multiple IAS on the page, or multiple IAS are used as the DOM is replaced).

In theory the unbind/destroy method should clean up all traces of IAS so as if it were never initialized.

fieg commented Dec 4, 2014

Yes, I also became aware of that while I was working on this for a potential fix. So please know that I'm still working on it.

d70rr3s commented Dec 20, 2014

Still no news on fixing this issue?

fieg commented Jan 16, 2015

In theory the unbind/destroy method should clean up all traces of IAS so as if it were never initialized.

@longzheng this should now be fixed in v2.2.0. Can you verify this?

jackhad commented Jan 27, 2015

I think its not fixed.I have tried in with new version of JS

fieg commented Jan 27, 2015

Yiinfinite-scroll seems totally not related to Infinite AJAX Scroll.


I am also experiencing this issue with v2.2.0.


Finally reading all the comments I am also one who face the same issue for multiple tab with use of ifiniteajaxscroll in each tab ...any good news

ses2013 commented Jan 19, 2016

Any hope on this or Info how to do that?
Cheers + Thanks


You can use the Link pager widget with listview and add below jquery which will just replace ur next button to ur HTML;

 $("#pagination3 > .prev ").css("display","none");

$("#pagination3 > .next3 > a").click(function(e){

         url: $(this).attr("href"),
         type: "get",
         success: function(data) {
               var items =$(data).find("#list-wrapper3 > .item3") ;
               $("#list-wrapper3 ").append(items);

               if($(data).find("#pagination3 > li.next3").hasClass("disabled")){
                 $("#pagination3 > .next3 > a").remove();
                 $("#pagination3 > .next3  ").text("No more items to display");
              else { 
               var next3 = $(data).find("#pagination > li.next3 > a").attr("href") ;              
             $("#pagination3 > .next3 > a").attr("href",next3);



and Linkpager will be below code

         'pagination' => $pages3,

         'nextPageLabel' => 'Load more',
         'nextPageCssClass'=>'load-more text-center next3',
         'options'=>['tag'=>'div','class'=>'load-more','id'=>'pagination3' ],
         'maxButtonCount'=> 0,
ses2013 commented Jan 28, 2016

Thanks for your Idea.
And the I duplicate the code for #pagination1 and #pagination2 ?
Thanks for some more input ...

ses2013 commented Jan 31, 2016

dear hitesh2088,
could you be so kind to point me to an solution here?
do you have any working url or some set up?
that would be very kind.
thanks again for your kindly help.


The simple logic is Linkpager will generate pagination in which 'maxButtonCount'=> 0, which gives only prev and next button out of which prev is not required so display none and next button u can have css applied as you required and the click of that button should fetch data with ajax and append that in the same container of list view widget ...

I hope you understand I have implemented this in one of the client project dont have any jsfiddle

ses2013 commented Feb 1, 2016

Hey, is it possible you are talking about a complete different Extension?
'cause I can't find the explanation for a "LinkPager::widget" in here.


Link pager is widget of Yii2 by which pagination can be created
check this out

kop commented Mar 29, 2016

@fieg do you have any time for this? Maybe you need some help with test data or something else (I wanted to create a PR, but I can't find an issue)?

This issue is really frustrating...


With my PR merged in master multiple instances should be reliably possible now. One thing to note is that you should not nest scroll containers when you do. The outer scroll container might start working with elements from the inner scroll container.

@fieg fieg closed this Aug 26, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment