Infinite scroll within conditional

Question

I have Derek Hogue's solution to infinite scroll working, with magicspon's fix for the issue of preventDefault being ignored: Infinite scroll and pagination on ee?? Anyone has this working?

This works great until I encapsulate the markup in IF conditionals, whereby the results don't update. I have tried early parsing using IfElse, but this has no effect. Why might this be?

Here's the full working test template:

{embed="embeds/index"}

{if "{segment_2}"==""}

<div id="entry-container" data-behaviour="moreEntries">
     <div class="ajax-wrapper">
            {exp:channel:entries
               channel="vacancies"
                dynamic="no"
              orderby="date"
              limit="2"

        }

    {if no_results}
        <div class="entry">
            <article style="min-height: 600px;">
                <header>
                    <h1>No Results</h1>
                </header>
                Check back soon for more blog posts. 
            </article>
        </div> <!-- /.entry -->
    {/if}
    <div class="entry">
        <article>
            <header>
                {title}
            </header>
           {vacancy_details}
        </article>
    </div> <!-- /.entry -->

    {paginate}
    <p class="moreEntries">
        {if next_page}<a href="{auto_path}" class="more" id="next">See More Posts</a>{/if}
    </p>
    {/paginate}
    {/exp:channel:entries}
  </div>
</div> 
{/if}

<link href="{site_url}css/styles.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="{site_url}bootstrapvalidator/css/bootstrapValidator.min.css"/>

<script src="{site_url}js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript">
 $(document).ready(function()
   {
    $('#entry-container').delegate('.more', 'click', function(e)
    {
        // Don't follow the link
        e.preventDefault();

        // Create a loading message and add it in place of the link
        loadingMessage = $('<p class="loading">Loading...</p>');
        $('.moreEntries').replaceWith(loadingMessage);

        // Fetch the next page
        $.get($(this).attr('href'), function(data)
        {                                           
            // Only grab the part of the page we want
            content = $(data).find('.ajax-wrapper').hide();

            // Add it to the DOM
            $(content).appendTo('#entry-container');

            // Remove loading indicator 
            $('.loading').fadeOut('fast').remove();

            // Fade-in our new content
            $(content).fadeIn('fast');
        });
    });
});
</script> 
</body>
</html>

Answer 1

Don't use the curly brackets and quotes on the segment in your conditional. Write your conditional like this:

{if segment_2 == ""}

Edit:

• your closing div for entry-container is missing the last character.
• Your link tags should be in de head of the document
• The final script tag is not closed.

Answer 2

Though the URL does not display the pagination segment (e.g. P10), it is valid at the parse stage. I was checking {if "{segment_2}" == ""} and expecting it to be true, but it was actually false because the pagination segment exists when the template parses.

Providing the template conditionals are written with this in mind, infinite scroll works just as well as normal pagination.