Databases
StackOverflow2013
Postsdbo
POjQuery Masonry - AJAX returned data not picking up masonry grid layout after being appended
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Masonry - AJAX returned data not picking up masonry grid layout after being appended
    text
    copied!<p>When I append AJAX returned data to my masonry container, it doesn't pick up the grid layout already applied to the previously loaded items. I'm using the following code wrapped in a document ready function:</p> <pre><code>// Masonry var $container = $('#masonry-container'); $container.imagesLoaded(function () { $container.masonry({ itemSelector: '.grid_4', isAnimated: true }); }); // AJAX Fotolia Image Search var morebtn = $('.get-more-results'); var sOffset = 50; morebtn.on('click', function () { var $cst = $('.crrsrch').text(); $.ajax({ type: "POST", url: "...", data: {}; success: function (data) { $container.imagesLoaded(function () { $container.append(data); $container.masonry('appended', data); }); } }); return false; }); </code></pre> <p>The items from the AJAX call get appended but they don't have the masonry layout - they're floated at the top of the list rather than appearing appended. The data is being appended in the markup.</p> <p>Using the Masonry appended method is throwing an error too. I'm getting the following in the console:</p> <pre><code>Uncaught TypeError: Property 'webkitMatchesSelector' of object is not a function i r._filterFindItemElements r._getItems r.addItems r.appended t.fn.(anonymous function) (anonymous function) doneLoading </code></pre> <p>Each of these relate to the masonry js file, apart from the last two ((anonymous function) and doneLoading).</p> <p>From using the method documentation on the masonry site, this should work. Obviously I'm missing something here.</p> <p>Extra information which might help - - The AJAX call is to the Fotolia API - The site is built on Wordpress 3.5.2 - The javascript files are being enqueued</p> <p>If anyone has any ideas or could offer some help, it would be much appreciated.</p> <p>Many thanks in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload