Multi instance in one page

[sama55]

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.

[kwiatekp]

Hello

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]

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

[re1naldo]

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).

[Alpine418]

Any update or workaround out there for this problem?

[fieg]

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

[Alpine418]

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

[fieg]

Can you send me an url where the problem occurs?

[Alpine418]

Hi,
i'm using a workaround but here is the url: http://freep2lay-games.de

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() {
        loadPlugins();
    });
    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]

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

[drawlusyk]

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.
Regards,
Dennis

[fieg]

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

[longzheng]

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]

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]

Still no news on fixing this issue?

[fieg]

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]

I think its not fixed.I have tried in http://www.yiiframework.com/extension/yiinfinite-scroll/ with new version of JS

[fieg]

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

[mikerogne]

I am also experiencing this issue with v2.2.0.

[hitesh2088]

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]

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

[hitesh2088]

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){
     e.preventDefault();

     $.ajax({
         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

LinkPager::widget([
         'pagination' => $pages3,

         'nextPageLabel' => 'Load more',
         'nextPageCssClass'=>'load-more text-center next3',
         'options'=>['tag'=>'div','class'=>'load-more','id'=>'pagination3' ],
         'maxButtonCount'=> 0,
               ]);  

[ses2013]

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

[ses2013]

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

[hitesh2088]

Dear,
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]

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

[hitesh2088]

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

[kop]

@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...

[sjorsrijsdam]

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.