Duplicate Entries loaded when history.back()

[Schrammi]

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]

I'm indeed seeing some strange behaviour.

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

[popovae]

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

[nokimaro]

Same issue on my site.

[popovae]

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]

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]

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

[Twansparant]

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

[tomashalo]

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]

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

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]

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]

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]

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]

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]

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]

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]

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

[Twansparant]

Yes, that fixed it for me! Thanks!

[fieg]

Glad to hear!

[tomashalo]

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

[fieg]

👍