Loading data from Google Spreadsheet has broken isotope jQuery

Question

A while ago I used isotope to make this grid of people. Each had a rollover effect as you can see.

http://thetally.efinancialnews.com/tallyassets/FinTech/index.html

I now want to make the same thing again but feeding the data in from a Google Spreadsheet, which I have succesfully achieved...

http://thetally.efinancialnews.com/tallyassets/fintech-40-2015/index.html

...however, now none of the jQuery works, but I'm not seeing any error messages. The essential code needed appears to be the same.

Have I made an error in the order of which I call the pieces of code? I can't see any problems with it. Is there other limitations of feeding code from google which I've missed?

Any ideas greatly appreciated

..another thing to add which seemed strange is the #content div which holds all the isotope items was being given a height of 0. I've had to add important! css to make the boxes show at all. Strange

Answer 1

Here is a working jsfiddle. This is using jQuery 1.11 and isotope v2. Since this version of isotope does not use the v1.5 CSS transitions they were removed from your css and the animationOptions were removed. Since you are loading json data, you need to use isotopes appended method. BTW, I noted that your filters do not work since they are case sensitive. So filtering "london" does nothing but "London" will filter the items. I changed a few to make them work.

See the relevant code below.

 $(document).ready(function () {
 var $container = $('#content');
     var selector = $(this).attr('data-filter');
    $container.isotope({
        itemSelector: '.box',
         filter: '*'              
    });

    $('.filter li a').on( 'click', function() {
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector
        });
        return false;
    });  


  $(function listBooks() {
       $.getJSON("https://spreadsheets.google.com/feeds/list/1ZHXE5lqr3WspVtnOpWaBUCBFxpxK_DFXoNMcVBAsiZI/od6/public/values?alt=json-in-script&callback=?",

    function (data) {

        $.each(data.feed.entry, function (i, entry) {

            var boxNo = i + 1;

            var item = '<div class="box ' + entry.gsx$sector.$t + ' ' + entry.gsx$location.$t + ' ' + 'box' + boxNo + '">';

            item += '<div class="box-all"><h2 class="box-title">' + entry.gsx$name.$t + ' ' + entry.gsx$surname.$t + '</h2><div class="box-text">' + entry.gsx$title.$t + '</div></div>';

            item += '</div>';
var $items = $('<a>' + item + '</a>');
$container.append($items).isotope( 'appended', $items );
$container.isotope('layout');            
        });

    });

 });