如何在Ajax中使用同位素？

What steps are needed to use Isotope with Ajax? How does Isotope recognizes newly added elements to the container? I've read the documentations but I don't see any mention of ajax anywhere in there.

In my code, I have a partial, which is the Isotope container in this case. The partial is refreshed with Ajax, and new contents are added to the container. So I figured I'd destory Isotope and initialize it again after all the items are added to the container, but that doesn't work.

if(isotopeContainer.data('isotope')) {  //checking if isotope is already initialized

   isotopeContainer.isotope('destroy').isotope({
      itemSelector: '.category-item',
      layoutMode: 'fitRows'
   });
} else{initialize it...}

thanks,

I just solved the problem, and it was because I was directly calling the element. In my code I am hiding, unhiding the container and then replacing the whole content of the container with new elements. So I wasn't delegating to get the isotopeContainer from the DOM tree.

So the issue is solved by using: $(document).find('#container')

Also after the ajax call I checked if the isotope is still valid, and doesn't appear so! (i'm not even destroying manually - something else is doing it) I'm using the following to check

if($(document).find('#container').data('isotope')) {}

So at this step I'm just initializing the isotope again, and this time the new elements are being picked up, and everything seems to work. Appended doesn't work in my cases since I'm replacing elements, not inserting or appending.

It's another solution

after you replacing new content

you use 'reloadItems' to init it again

put this after your ajax success function

$container.isotope('reloadItems');                      
setTimeout(function () { $container.isotope('layout') }, 500); 

Hope that help.