0

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>
| improve this question | | | | |
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.
| improve this answer | | | | |
  • Thank you, but this makes no difference. – user2265915 Jun 4 '15 at 12:57
  • I updated my answer. – Balloonatic Jun 5 '15 at 15:41
  • Ah, both the missing character and final script tag got lost when I copied the information to StackExchange. They exist in the original template, and I have updated my question. The link tags are in the footer so as not to block page rendering. This is normal practice and helps the Google PageSpeed Insights score. Putting them in the header also makes no difference, though. – user2265915 Jun 5 '15 at 17:00
0

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.

| improve this answer | | | | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.