Question

I have a page which can be reloaded (no problem) and can be called via an Ajax call.

When I put the initialization code for the isotope plugin in $(document).ready then my isotope items are all messed up. In $(window).load everything works fine.

The problem is that when calling the page via Ajax the load event is obviously not firing.

When I put the initialization in the Ajax callback I have the same problem as in the $(document).ready.

My current workaround is a setTimeout in my $(document).ready. This is for obvious reasons not a good solution.

Any nice solution?

Answer 1

Try checking to see if the ajax has successfully loaded and then call isotope.

$.getScript("ajax.html", function(data,exception) {   
    if(exception === "success")
    {
        masonryBlocks();
    }
});

function masonryBlocks(){
  $(function(){    
      var $container = $('#container');

      $container.isotope({
        itemSelector: '.box',
        masonry: {
          columnWidth: 1
        }
      });
  });
}