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

Duplicate Entries loaded when history.back() #183

Closed
Schrammi opened this Issue Mar 12, 2015 · 21 comments

Comments

Projects
None yet
7 participants
@Schrammi

Schrammi commented Mar 12, 2015

You can reproduce this issue.

Go to http://infiniteajaxscroll.com/examples/basic/page1.html and scroll down until "Load more items" appears.
Then click the "Webcreate" in the footer.
After the new page is loaded, click the Back-Button in the Browser. The Browser remembers the last position and the infinite-ajax-scroll load the missing entries, but it loads the same page multiple times.

You can see Item 2.1 multiple times.
I think the plugins don't use the new pagination links after loading the first "next page".

@fieg

This comment has been minimized.

Member

fieg commented Mar 12, 2015

I'm indeed seeing some strange behaviour.

screen shot 2015-03-12 at 15 30 39

Definitely a bug! Thanks for reporting. Will look into it soon.

@popovae

This comment has been minimized.

popovae commented Apr 6, 2015

Any fix...seems like it loads 4 times not only in demo...seems like this plugin is really a mess...

@nokimaro

This comment has been minimized.

nokimaro commented Apr 6, 2015

Same issue on my site.

@popovae

This comment has been minimized.

popovae commented Apr 6, 2015

Well, seems like this project is not supported anyhow...this problem is posted 25 days ago as critical and still no news. Thats good that I decided to test it first...

@popovae

This comment has been minimized.

popovae commented Apr 6, 2015

For sure it happens if any of extension is active. If 1 extension is active data will be duplicated, 2 extensions - you get triple data...and so on))))

@adambirdie

This comment has been minimized.

adambirdie commented Apr 10, 2015

Yeah I have noticed this also is there a way to reset initialised elements?

@Twansparant

This comment has been minimized.

Twansparant commented May 1, 2015

Yup same here, only happens to me in Firefox & Safari though?
Any workarounds available?

@tomashalo

This comment has been minimized.

tomashalo commented May 5, 2015

Same here, dupli- or triplicate items after extensions are activated - as user popovae mentioned above. This is the critical issue in combination with isotope filtering, please fix this. i bought the commercional licence and would like to have this resolved.

thank you very much

@popovae

This comment has been minimized.

popovae commented May 5, 2015

@tomashalo You better make a refund asap, this plugin seems to have much more critical bugs, and seems like the dev is not supporting it any more... 1 month passed and still no fix - its the thing you have to think about))

@adambirdie

This comment has been minimized.

adambirdie commented May 5, 2015

Im not entirely sure this is a fix but it seems to have stopped the duplicates on mine. This isnt fully tested but here is my code, let me know if this helps?

 $(function () {

 (function($tvshows_listing){

    if($tvshows_listing.length)
    {
        var ias = jQuery.ias({
            container:  '#tvshows-listing',
            item:       '.l-tvshows-listing-item',
            pagination: '.m-pagination-tvshows',
            next:       '.next-page-link'
        });

        ias.extension(new IASSpinnerExtension({
            src: '/templates/default/images/loader.gif',
            html: '<div class="ias-spinner l-listing-loading"><img src="{src}"/></div>'
        }));

        ias.extension(new IASNoneLeftExtension({
            text: 'You have reached the end of the shows...',
            html: '<div class="ias-noneleft l-tvshows-listing-noneleft">{text}<em class="fa fa-frown-o"></em></div>'
        }));

        ias.extension(new IASTriggerExtension({
            offset: 5,
            text: 'Load More Shows',
            textPrev: 'Load Previous Shows',
            html: '<div class="ias-trigger ias-trigger-next l-tvshows-listing-nav l-tvshows-listing-nav-next"><a>{text} <em class="fa fa-caret-down"></em></a></div>',
            htmlPrev: '<div class="ias-trigger ias-trigger-prev l-tvshows-listing-nav l-tvshows-listing-nav-prev"><a><em class="fa fa-caret-up"></em> {text}</a></div>'
        }));

        ias.extension(new IASPagingExtension());

        ias.extension(new IASHistoryExtension({
            prev: '.prev-page-link'
        }));

        ias.on('ready', function() {

            $('.ajax-follow-listing-toggle').off( "click");
            follow_toggle_show_listing( $('.ajax-follow-listing-toggle') );
        });

        ias.on('rendered', function() {

            $('.ajax-follow-listing-toggle').off( "click");
            follow_toggle_show_listing( $('.ajax-follow-listing-toggle') );
        });
    }

})($('#tvshows-listing'));
});
@Twansparant

This comment has been minimized.

Twansparant commented May 6, 2015

Cool thanks, gonna give that a try tomorrow!
So that basically checks if the variable $tvshows_listing has been set yet by the function, if not it will run otherwise it won't?

@adambirdie

This comment has been minimized.

adambirdie commented May 6, 2015

Yeah it's just a self-invoking function... I had to add in ready and rendered for some Ajax buttons on the page which I think you can ignore.

@Twansparant

This comment has been minimized.

Twansparant commented May 8, 2015

I don't seem to get this working in my DOM-based Routing (http://www.paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/) script. It's still loading duplicate pages 5 times when browsing back...

(function($) {
var Project = {
  // Isotope
  isotope: {
    init: function() {
      // Isotope
      var $container = $('.grid');
      $container.isotope({
        itemSelector:  '.hentry',
        stamp:         '.stamp',
        masonry: {
          columnWidth: 150,
          gutter:      15
        }
      });
    }
  },
  // Infinite Ajax Scroll
  infinitescroll: {
    init: function() {
      var $container = $('.grid');
      (function($infinitegrid){
        if($infinitegrid.length) {
          var cururl;
          var preapp;
          var ias = $.ias({
            container:      ".grid",
            item:           ".hentry",
            pagination:     ".post-nav",
            next:           ".next a",
            delay:          1000,
            negativeMargin: 50
          });
          // Infinite Ajax Scroll Extensions
          ias.extension(new IASSpinnerExtension({
            src: "/wp-content/themes/mytheme/assets/img/loading-icon.gif",
            html: "<div class='ias-spinner'><img src='{src}'/><div>"+loadingmessage+"</div></div>"
          }));
          ias.extension(new IASTriggerExtension({
            offset:   50
          }));
          ias.extension(new IASPagingExtension());
          ias.extension(new IASHistoryExtension({ prev: '.previous a' }));
          ias.extension(new IASNoneLeftExtension({ text: lastitemmessage }));
          // Infinite Ajax Scroll Events
          // Triggered when a new page is about to be loaded from the server
          ias.on('load', function(event) {
            cururl = event.url;
          });
          // Triggered after new items have rendered.
          ias.on('rendered', function(newElements) {
            var $newElements = $(newElements);
            window.respimage();
            $newElements.each(function() {
              $('.entry-video', this).fitVids();
              // Update correct page nr on click
              $('.entry-content a.permalink', this).on('click', function(event) {
                event.preventDefault();
                var permalink = $(this).attr('href');
                var pagenr    = $(this).closest('.hentry').attr('data-page');
                var pageurl   = cururl.slice(0,-2);
                pageurl      += pagenr + '/';
                // Update url and go to permalink
                window.history.replaceState(null, 'updated page nr', pageurl);
                window.location.href = permalink;
              });
            });
            $container.isotope(preapp, $(newElements));
          });
          // Triggered when the next page should be loaded
          ias.on('next', function(url) {
            preapp = 'appended';
          });
          // Triggered when the previous page should be loaded
          ias.on('prev', function(url) {
            preapp = 'prepended';
          });
        }
      })($('.grid'));
    }
  }
};

var UTIL = {
  fire: function(func, funcname, args) {
    var namespace = Project;
    funcname = (funcname === undefined) ? 'init' : funcname;
    if (func !== '' && namespace[func] && typeof namespace[func][funcname] === 'function') {
      namespace[func][funcname](args);
    }
  },
  loadEvents: function() {
    UTIL.fire('common');
    $.each(document.body.className.replace(/-/g, '_').split(/\s+/),function(i,classnm) {
      UTIL.fire(classnm);
    });
  }
};

$(document).ready(UTIL.loadEvents);

})(jQuery); // Fully reference jQuery after this point.

The body on the pages concerned contain both the classes isotope & infinitescroll.
Any ideas?

@adambirdie

This comment has been minimized.

adambirdie commented May 8, 2015

I've noticed that if the browser has scrolled just before the next page I get the duplicate entries, but it seems inconsistent and I have only seen it twice after 3 days of testing. I'm not sure if this what your getting now.

Hopefully a fix will come out for this soon...

@Twansparant

This comment has been minimized.

Twansparant commented May 8, 2015

I know, it's really inconsistent and hard to debug...
For a while I though it only happened when browsing back to page 2

@fieg

This comment has been minimized.

Member

fieg commented May 8, 2015

Hey guys, for your interest: I'm currently working on this issue. If all goes well, I hope to have a fix later today.

fieg added a commit to fieg/Infinite-Ajax-Scroll that referenced this issue May 8, 2015

fieg added a commit that referenced this issue May 8, 2015

Merge pull request #197 from fieg/issue-183
Prevent multiple initialisations (#183)
@fieg

This comment has been minimized.

Member

fieg commented May 8, 2015

I released a fix. You can download the latest release from http://infiniteajaxscroll.com/download.html.

@Twansparant

This comment has been minimized.

Twansparant commented May 8, 2015

Yes, that fixed it for me! Thanks!

@fieg

This comment has been minimized.

Member

fieg commented May 8, 2015

Glad to hear!

@tomashalo

This comment has been minimized.

tomashalo commented May 10, 2015

Hello fieg,
seems that resolved my problem, more testing in progress. thanks for now.

@fieg

This comment has been minimized.

Member

fieg commented May 10, 2015

👍

@fieg fieg closed this May 10, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment