Geek Answers Handbook

Initiate Freemasonry - After Endless Scrolling and Parametric Search

Having problems with AJAX and Freemasonry . The masonry grid just does not start at the right time.

Before scrolling or using parametric search to go to a certain category, it works very well.

An example site can be found here .

Masonry

Freemasonry is a JavaScript grid layout library. Commonly used with Bootstrap or another mesh that does not align elements correctly. Example:

Bootstrap only:

Only with Bootstrap

Bootstrap and Freemasonry:

With bootstrap and freemasonry

While scrolling

The following columns are added over the older ones. It gives almost the same result as the unloaded images , which makes the images overlap. This is usually resolved using imagesLoaded , which I have already included in the provided code.

After scrolling

When using parametric search

Freemasonry does not start after AJAX. This does not work. Thus, columns are loaded without Freemasonry.

Please see sample site .

When using parametric search

Both scrolling and parametric searches are delivered by Toolset . They have a good system, thanks to which it is very easy to load JS at a certain time:

  • After completing AJAX Pagination with Toolset .
  • When starting a parametric search.
  • When parametric search data is collected.
  • When the parametric search form is updated.
  • When the parametric search parameters have been updated.

So, both after pagination, and before / during / after Parametric search . Since the problem arises after scrolling, and after the results for the parametric search have been updated, I would like to start the Freemasonry grid at this very moment.

The simplest example is scrolling or paging, as it was called.

What i tried

I used reloadItems , as I assumed, would be correct. Please correct me if I am wrong. Resource .

 jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) { $container.masonry('reloadItems') });

In my theory, it will reload all objects when scrolling, so they will be properly organized. But he does not change anything.

I also tried the following:

 jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) { var $container = $('.masonry-container'); $container.imagesLoaded(function() { $container.masonry('reload'); $container.masonry({ isInitLayout : true, itemSelector: '.col-md-3' }); }); //and on ajax call append or prepend $container.prepend($data).imagesLoaded(function(){ $container.masonry( 'prepended', $data, true ); }); });

I also tried reloading items while updating parametric search results.

 jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) { $container.masonry('reloadItems') });

But that didn't work either.

Freemasonry is also added to the footer using one of the methods.

 (function( $ ) { "use strict"; var $container = $('.masonry-container'); $container.imagesLoaded( function () { $container.masonry({ columnWidth: '.col-md-3', percentPosition: true, itemSelector: '.col-md-3' }); }); })(jQuery);

Do you have any ideas? Where am I doing wrong?

Change 1:

Console error

When loading page

Uncaught ReferenceError: data not defined

While scrolling

Uncaught ReferenceError: $ container not defined

Function changed as follows

  (function( $ ) { // Initiate Masonry "use strict"; var $container = $('.masonry-container'); $container.imagesLoaded( function () { $container.masonry({ columnWidth: '.item', percentPosition: true, itemSelector: '.item', isAnimated: true // the animated makes the process smooth }); }); $(window).resize(function() { $('.masonry-container').masonry({ itemSelector: '.item', isAnimated: true }, 'reload'); }); })(jQuery); //and on ajax call append or prepend more items var $data = $(data).filter(".item"); $container.prepend($data).imagesLoaded(function(){ $container.masonry( 'prepended', $data, true ); });

Updated images uploaded to the latest version

I also updated the images uploaded to the newest version.

Script can be found here .

Added .item

I added the .item class instead of using col-md-3, as I thought this would be a better solution.

The HTML value is now straightforward:

 <div class="container"> <div class="masonry-container"> <div class="item"> <!-- Content comes here --> </div> <div class="item"> <!-- Content comes here --> </div> <div class="item"> <!-- Content comes here --> </div> <div class="item"> <!-- Content comes here --> </div> ... </div> </div>

And so on.

Still console errors.

Any solutions?

+6
source share
1 answer

The problem was resolved by removing some duplication, etc.

Then using the following:

 (function( $ ) { "use strict"; var $container = $('.masonry-container'); $container.imagesLoaded( function () { $container.masonry({ columnWidth: '.item', percentPosition: true, itemSelector: '.item' }); }); $( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) { $container.masonry('reloadItems').masonry(); }); $( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) { $container.masonry('reloadItems').masonry(); }); $( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) { $container.masonry('reloadItems').masonry(); $container.imagesLoaded( function() { $container.masonry(); }); }); $( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) { $container.masonry('reloadItems').masonry(); $container.imagesLoaded( function() { $container.masonry(); }); }); })(jQuery);

This has been added to footer.php.

0
source

More articles:


All Articles