New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multi instance in one page #93

Closed
sama55 opened this Issue Oct 1, 2013 · 28 comments

Comments

Projects
None yet
@sama55

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.

@kwiatekp

This comment has been minimized.

Show comment
Hide comment
@kwiatekp

kwiatekp Oct 24, 2013

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

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

This comment has been minimized.

Show comment
Hide comment
@fieg

fieg Jan 27, 2014

Member

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

Member

fieg commented Jan 27, 2014

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

@re1naldo

This comment has been minimized.

Show comment
Hide comment
@re1naldo

re1naldo Mar 11, 2014

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

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

This comment has been minimized.

Show comment
Hide comment
@rjgamer

rjgamer Mar 26, 2014

Any update or workaround out there for this problem?

rjgamer commented Mar 26, 2014

Any update or workaround out there for this problem?

@fieg

This comment has been minimized.

Show comment
Hide comment
@fieg

fieg Mar 26, 2014

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@rjgamer

rjgamer May 2, 2014

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

rjgamer commented May 2, 2014

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

@fieg

This comment has been minimized.

Show comment
Hide comment
@fieg

fieg May 2, 2014

Member

Can you send me an url where the problem occurs?

Member

fieg commented May 2, 2014

Can you send me an url where the problem occurs?

@rjgamer

This comment has been minimized.

Show comment
Hide comment
@rjgamer

rjgamer May 5, 2014

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

rjgamer commented May 5, 2014

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

This comment has been minimized.

Show comment
Hide comment
@fieg

fieg May 7, 2014

Member

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

Member

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

@drawlusyk

This comment has been minimized.

Show comment
Hide comment
@drawlusyk

drawlusyk Aug 1, 2014

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

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

This comment has been minimized.

Show comment
Hide comment
@fieg

fieg Sep 15, 2014

Member

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

Member

fieg commented Sep 15, 2014

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

@longzheng

This comment has been minimized.

Show comment
Hide comment
@longzheng

longzheng Dec 4, 2014

Contributor

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.

Contributor

longzheng commented Dec 4, 2014

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

This comment has been minimized.

Show comment
Hide comment
@fieg

fieg Dec 4, 2014

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@d70rr3s

d70rr3s Dec 20, 2014

Still no news on fixing this issue?

d70rr3s commented Dec 20, 2014

Still no news on fixing this issue?

@fieg

This comment has been minimized.

Show comment
Hide comment
@fieg

fieg Jan 16, 2015

Member

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?

Member

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

This comment has been minimized.

Show comment
Hide comment
@jackhad

jackhad Jan 27, 2015

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

jackhad commented Jan 27, 2015

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

@fieg

This comment has been minimized.

Show comment
Hide comment
@fieg

fieg Jan 27, 2015

Member

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

Member

fieg commented Jan 27, 2015

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

@mikerogne

This comment has been minimized.

Show comment
Hide comment
@mikerogne

mikerogne Mar 7, 2015

I am also experiencing this issue with v2.2.0.

I am also experiencing this issue with v2.2.0.

@hitesh2088

This comment has been minimized.

Show comment
Hide comment
@hitesh2088

hitesh2088 Nov 2, 2015

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

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

This comment has been minimized.

Show comment
Hide comment
@ses2013

ses2013 Jan 19, 2016

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

ses2013 commented Jan 19, 2016

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

@hitesh2088

This comment has been minimized.

Show comment
Hide comment
@hitesh2088

hitesh2088 Jan 20, 2016

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,
               ]);  

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

This comment has been minimized.

Show comment
Hide comment
@ses2013

ses2013 Jan 28, 2016

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

ses2013 commented Jan 28, 2016

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

@ses2013

This comment has been minimized.

Show comment
Hide comment
@ses2013

ses2013 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 https://jsfiddle.net set up?
that would be very kind.
thanks again for your kindly help.
stefan

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 https://jsfiddle.net set up?
that would be very kind.
thanks again for your kindly help.
stefan

@hitesh2088

This comment has been minimized.

Show comment
Hide comment
@hitesh2088

hitesh2088 Feb 1, 2016

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

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

This comment has been minimized.

Show comment
Hide comment
@ses2013

ses2013 Feb 1, 2016

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

ses2013 commented Feb 1, 2016

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

This comment has been minimized.

Show comment
Hide comment
@hitesh2088

hitesh2088 Feb 1, 2016

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

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

@kop

This comment has been minimized.

Show comment
Hide comment
@kop

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

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

@sjorsrijsdam

This comment has been minimized.

Show comment
Hide comment
@sjorsrijsdam

sjorsrijsdam Jun 5, 2016

Collaborator

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.

Collaborator

sjorsrijsdam commented Jun 5, 2016

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