Masonry + Infintine scroll implementation problems

Question

I managed to implement infinite scroll with masonry in WordPress and it's working but I have a couple of bugs:

The posts are supposed to be opened in ajax, but it's not working for the added items now, only for the first few ones.

After all the posts are displayed the console outputs the error: GET http://www.jcvergara.com/working/page/3/?_=1431138637809 404 (Not Found). I'm not sure what it is related to. I would appreciate any ideas how to fix it.

Here is my code:

<div class="main">
    <div id="content" class="container">
        <div class="right-line"></div>

        <!-- List of categories, only on the first page -->
        <?php 
                $cur_url = $_SERVER['REQUEST_URI'];
                if ($cur_url == '/working/') {
                    echo '<div class="item tags">';
                    echo '<div class="item-title">';
                    echo '<span class="tag">Tags</span>';
                    echo '<ul><li><a href="/working/" class="active">All</a></li>';
                    wp_list_categories('orderby=term_group&title_li=');
                    echo '</ul></div></div>';
                }

            ?>

        <!-- Posts -->
        <?php if ( have_posts() ) : ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <?php $category = get_the_category(); ?>
                <div class="item <?php echo $category[0]->slug; ?>">
                    <a class="mask post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>"></a>
                    <div class="item-title">
                        <span class="tag">
                            <?php echo $category[0]->cat_name; ?>
                        </span>
                        <h4><?php the_title(); ?></h4>
                    </div>
                    <div class="item-img">
                        <?php if (has_post_thumbnail( $post->ID ) ): ?>
                            <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
                            <div class="thumb" style="background-image: url('<?php echo $image[0]; ?>'); "></div>                                   
                        <?php endif; ?> 
                    </div>
                    <div class="item-text">
                        <?php the_excerpt(); ?>
                        <span class="more"><a href="#">Read more...</a></span>
                    </div>
                </div>
            <?php endwhile; ?>
        <?php endif; ?>
        <div class="clear"></div>       
    </div>
    <?php the_posts_navigation(); ?>
</div>

The code for opening posts in ajax:

$(document).ready(function(){ 
$.ajaxSetup({cache:false});
$('.post-link').click(function(){
    $('.openarticle').css('display', 'block');

    var post_link = $(this).attr('href');

    $('#openthis').html('<div class="title"><h2>Loading..</h2><div class="text"></div>');
    $('#openthis').load(post_link);
    $('<a></a>', {
        text: 'Close',
        class: 'close',
        id: 'close',
        href: '#'
    })
    .prependTo($('.openarticle .main'))
    .click(function() {
        $('.openarticle').css('display', 'none');
        $('#close').remove();
    });       
    return false;        
}); 
});

Here is the link: http://www.jcvergara.com/working/

Thanks in advance.

Answer 1

You need to add the code for opening your posts in infinite-scroll's callback function. (BTW, You should actually include the specific code for infinite-scroll and your code to open the post in your question, not just give a link.)

Here is the part of the infinite-scroll code that should help:

     function( newElements ) {
            var $newElems = $( newElements );
            $container.masonry( 'appended', $newElems );
  //add this to your code

   $('.post-link').click(function(){
    $('.openarticle').css('display', 'block');

    var post_link = $(this).attr('href');

    $('#openthis').html('<div class="title"><h2>Loading..</h2><div class="text"></div>');
    $('#openthis').load(post_link);
    $('<a></a>', {
        text: 'Close',
        class: 'close',
        id: 'close',
        href: '#'
    })
    .prependTo($('.openarticle .main'))
    .click(function() {
        $('.openarticle').css('display', 'none');
        $('#close').remove();
    });
    return false; 
    }); 

        }

Your error message relates to there not being a page 3 to load by infinitescroll