CODEWITHSUNDEEP
ajax
JNB
JNB

Reputation: 73

Append AJAX items to masonry with infinite scroll

I've searched around and looked at a bunch of different logic, and think I'm very close but simply can't get my infinite scroll script to append my data to masonry. I have an AJAX file while is pulling the data, and this is the main line inside of the file which pulls the data when scrolling:

        function getData() {

            // Post data to ajax.php
            $.post('ajax.php', {

                action        : 'scrollpagination',
                number        : $settings.nop,
                offset        : offset,

            }, function(data) {

                // Change loading bar content (it may have been altered)
                $this.find('#spinner').html($initmessage);

                // If there is no data returned, there are no more posts to be shown. Show error
                if(data == "") { 
                    $this.find('#spinner').hide();  
                }
                else {



                    // Offset increases
                    offset = offset+$settings.nop; 

                    // Append the data to the content div
                    $this.find('.content').append(data);


                    // No longer busy!  
                    busy = false;
                }   

            });

        }

I've tried making edits to the line "$this.find('.content').append(data);" as this is simply taking the data and putting it into the content div which is sitting inside of my masonry function in my main index file.

I've tried things such as

$this.find('.content').append(data).masonry ('reload');

But simply can't get it to work properly and have it append the data.

The rest of the code is working, and scrolling is working properly and pulling data, just won't append to masonry.

Any tips, I feel like I'm missing something very minor.

Thanks in advance!

Upvotes: 1

Views: 8556

Answers (2)

JNB
JNB

Reputation: 73

$moreBlocks.imagesLoaded(function(){

    $moreBlocks.animate({ opacity: 1 });

    jQuery('#container').masonry( 'appended', $moreBlocks );

});

Looks like this did it. Thanks for your help Drew, appreciate it a ton!

Upvotes: 2

Drew Baker
Drew Baker

Reputation: 14430

I had the same issues with Masonry (the new version 3). The key is the .filter() for what AJAX/GET/POST returns. There is a bug with Masonry that you can read here, the work around is to use .filter().

    // Make jQuery object from HTML string
    var $moreBlocks = jQuery(data).filter('div.block');

    // Append new blocks to container
    jQuery('#container').append( $moreBlocks );

    // Have Masonry position new blocks
    jQuery('#container').masonry( 'appended', $moreBlocks );

I made a little demo to help out here: http://labs.funkhausdesign.com/examples/masonry/appended.html

Upvotes: 9

Related Questions