Ajax Load More and Masonry

  • Resolved bobdobbs

    (@bobdobbs)


    9 years, 7 months ago

    The problem

    My first 3 posts are loaded into div#masonry-container.
    on domready I call .masonry on this container.

    I present the ‘load more posts’ button to the user. The posts are injected into div#masonry-container when the user hits the button.

    The newly added elements overshoot #masonry-container.
    They shoot right out of the container and overlap other elements on the page.

    What I’ve tried

    After the new elements are injected into #masonry-container, I go to the javascript console.
    I try this:

    jQuery(“#masonry-container”).masonry(‘reload’)

    This returns an object in the console, but doesn’t effect the visible grid.

    Another shot

    I reload the page and start again. I follow Ian Dunn’s solution, described here:
    https://iandunn.name/dynamically-adding-html-elements-to-a-masonry-container/

    This solution seems to follow the advice that dcooney gives here:
    https://wordpress.org/support/topic/masonry-1?replies=2

    So, following Ians solution: I skip the part where he uses ajax directly, and just use ‘reloadItems’, followed by ‘layout’.

    I don’t get errors or anything, but the grid remains the same.

    Surely there must be a canonical solution for performing a layout of the grid after new elements are injected.

    Any pointers?

    https://wordpress.org/plugins/ajax-load-more/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Darren Cooney

    (@dcooney)

    9 years, 7 months ago

    Hi bobdobbs,
    Have you tried the append method on the Masonry website?
    http://desandro.github.io/masonry/demos/adding-items.html

    Plugin Author Darren Cooney

    (@dcooney)

    9 years, 7 months ago

    Actually, the above link wont really help…

    You will need to ‘reload’ masonry after the ajax loading is completed and follow the advice given in this thread(as you pointed out) – https://wordpress.org/support/topic/masonry-1?replies=2

    I don’t have a masonry example to test with, but if I get some time this weekend I might run a test.

    Thread Starter bobdobbs

    (@bobdobbs)

    9 years, 7 months ago

    Hey Darren. Hope your weekend is going well.

    I’ve built a test case here:
    http://dev4.sunil.co.nz/blog

    This is what the template looks like: https://gist.github.com/sunilw/68107641d79578f5074f

    (Nevermind the awkward positioning of the ‘load more’ button.)

    I may have found a workaround: putting the ‘load more’ button outside of #masonry-wrapper.
    This workaround would require a little hackery, but it could be the beginning of a solution.

    Plugin Author Darren Cooney

    (@dcooney)

    9 years, 7 months ago

    Hi,
    I’ve got this working on my local machine using masonry and imagesloaded. Now, I just need to put together the example on the plugin site with the JS code for you.

    I’m also adding a callback function that is dispatched once ajax success is fired. This will also help other users who need to track events based on success ajax calls. This will be included in the next release of the plugin.
    $.fn.almComplete();

    In the meantime, the following code works using the default jQuery ajaxComplete function.

    var masonryInit = true;
   $(document).ajaxComplete(function( event, xhr, settings ) {
	if($('#masonry-grid').length){
	   var $container = $('#masonry-grid ul');
		if(masonryInit){
		    // initialize
		    masonryInit = false;
		    $container.masonry({
		      itemSelector: '.full-image'
		    });
	      }else{
		   $container.masonry('reloadItems');
	      }
	      $container.imagesLoaded( function() {
	         $container.masonry();
	      });
	   }
	});
    Plugin Author Darren Cooney

    (@dcooney)

    9 years, 7 months ago

    The example is up – http://connekthq.com/plugins/ajax-load-more/examples/masonry/

    Pirco the One and Only

    (@pirocpiroccom)

    9 years, 1 month ago

    also trying this… saw your example at the link you posted (and have the latest version of the plugin) but unsure where to place that function…

    var masonryInit = true;	// set Masonry init flag
$.fn.almComplete = function(alm){ // Ajax Load More callback function
	if($('.masonry-item').length){
		var $container = $('#main'); // our container
		if(masonryInit){
			// initialize Masonry only once
			masonryInit = false;
			$container.masonry({
				itemSelector: '.masonry-item'
			});
		}else{
			$container.masonry('reloadItems'); // Reload masonry items oafter callback
		}
		$container.imagesLoaded( function() { // When images are loaded, fire masonry again.
			$container.masonry();
		});
	}
};

    which .js file does it go into? I tried within your plugin ( ajax-load-more/core/js/ajax-load-more.js ) and in my own scripts.js file but there, the error console reads: “Uncaught TypeError: Cannot read property ‘fn’ of undefined”

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Ajax Load More and Masonry’ is closed to new replies.