Loading items with Ajax on scroll

[mathieupreaud]

In my colcade grid, I'm using AJAX to load items on scroll.

 var grid = $('.grid').colcade({
          columns: '.grid-col',
          items: '.post'
       });

$(window).scroll(function(){
        var data = {
            'action': 'load_index',
                        'query': posts_myajax,
            'page' : current_page_myajax
        };
        if( $(document).scrollTop() > ( $(document).height() - bottomOffset ) && canBeLoaded == true ){
            $.ajax({
                url : 'http://localhost:8888/sites/mysite/wp-admin/admin-ajax.php',
                data:data,
                type:'POST',
                beforeSend: function( xhr ){
                    canBeLoaded = false;
                },
                success:function(data){
                    if( data ) {

                                               grid.colcade( 'append', data ); // where to insert posts

                        canBeLoaded = true;
                        current_page_myajax++;
                    }
                }
            });
        }
    });

The grid works but the AJAX call doesn't. I have the following error in the console:

TypeError: Argument 1 ('node') to Node.appendChild must be an instance of Node

Thank you.

[mathieupreaud]

I Found the solution thanks to #14

var el = $(data);
$('.grid').colcade('append', el);