I am using Masonry Views module for displaying content. When I use ajax with Views Load More, the new content is loaded above the previous content. any solution?

Comments

trigdog’s picture

This is what I did to get this to work. I used the masonry destroy method in the masonry api module masonry.js file if the context of the request was not equal to the whole html document. So I changed the lines:

      // Apply Masonry to container
      if (settings.images_first) {
        $container.imagesLoaded(function () {
          $container.masonry($options);
        });
      }
      else {
        $container.masonry($options);
      }

to:

      // Apply Masonry to container
      if (settings.images_first) {
        $container.imagesLoaded(function () {
	  if (context !== document) {
	    $container.masonry('destroy');
	  }
          $container.masonry($options);
        });
      }
      else {
	if (context !== document) {
	  $container.masonry('destroy');
        }
        $container.masonry($options);
      }

Maybe this will help someone else come up with a better solution but it works for now. Tried using the reloadItems method but couldn't get it to work.

johankasperi’s picture

Hi trigdog! Thanks for your solution, it solved my problem! But I changed to "reload" instead of "destroy", that will prevent jumping up to the top of the page.

      // Apply Masonry to container
      if (settings.images_first) {
        $container.imagesLoaded(function () {
  if (context !== document) {
    $container.masonry('reload');
  }
          $container.masonry($options);
        });
      }
      else {
if (context !== document) {
  $container.masonry('reload');
        }
        $container.masonry($options);
      } 
bsarchive’s picture

Thank you!

Luxian’s picture

This is my solution based on #2 (reload instead of destroy):

masonry.js (from masonry module):

      // Apply Masonry to container
      if (settings.images_first) {
        $container.imagesLoaded(function () {
          $container.hasClass('masonry') ? $container.masonry('reload') : $container.masonry($options);
        });
      }
      else {
        $container.hasClass('masonry') ? $container.masonry('reload') : $container.masonry($options);
      }
aaronbauman’s picture

Title: Integration with Masonry Views module » Integration with Views Load More module
Project: Views Load More » Masonry Views
Version: 7.x-1.1 » 7.x-1.x-dev
Issue summary: View changes

This is an issue with Masonry Views module, not Views Load More.
Load More pager is doing the right thing by calling attachBehaviors after its done executing.
Masonry Views needs to re-attach itself.

aaronbauman’s picture

Title: Integration with Views Load More module » Re-attach behaviors after ajax callback
Project: Masonry Views » Masonry API

And actually this is a bug with Masonry API, and a duplicate of this issue:
#1808018: Make work with Views Infinite Scroll

aaronbauman’s picture

Status: Active » Closed (duplicate)
sebastiendan’s picture

This a patch with #4 solution, since it's the only solution that worked for me.

sebastiendan’s picture

Works with masonry 2.0.

davidneedham’s picture

+++ b/masonry.js
@@ -44,17 +44,17 @@ Drupal.behaviors.masonry = {
+})(jq17);

This patch works for me if leave this alone. What's the reason for changing this to jq17?