4

I'm trying to use this script to AJAX load paginated entries in EE. There may be a far simpler way to do it though.

This script works, but replaces the current 10 entries with the next 10 entries, but instead I would like the next 10 entries to be appended to the list.

Also, clicking the Show More button should keep adding the next 10 '<article>'s and then the Show More button should disappear once there are no more to show.

<section id="articles">
    {exp:channel:entries channel="page" sort="asc" orderby="title" limit="10" paginate="bottom" dynamic="no"}
        <article>
            <h2>{title}</h2>
            {page_summary}
        </article>
        {paginate}
            {pagination_links}
                <ul class="pagination">
                    {next_page}
                        <li><a href="{pagination_url}">Show More</a></li>
                    {/next_page}
                </ul>
            {/pagination_links}
        {/paginate}
    {/exp:channel:entries}
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
(function(a) {
    a.fn.pager = function(b) {
        var d = "#" + a(this).attr("id");
        var c = {
            link: ".pagination a",
            pull: d + " > *",
            loaderID: "loader",
            scrollTo: "body",
            fadeSpeed: 100,
            fadeOpacity: 0.5
        };
        var b = a.extend(c, b);
        a(b.link).live("click", function(g) {
            g.preventDefault();
            var f = a(this).attr("href");
            a(d, function() {
                a(d).fadeTo(b.fadeSpeed, b.fadeOpacity);
                a(d).after('<i id="' + b.loaderID + '" style="display: none;"></i>');
                a("#" + b.loaderID).fadeIn(b.fadeSpeed)
            }).load(f + " " + b.pull, function() {
                a(d).fadeTo(b.fadeSpeed, 1);
                a(window).scrollTop(a(b.scrollTo).position().top);
                a("#" + b.loaderID).fadeOut(b.fadeSpeed, function() {
                    a("#" + b.loaderID).remove()
                })
            })
        })
    }
})(jQuery);
</script>
<script>
$(document).ready(function() {
    $('#articles').pager();
});
</script>

I wondered if anyone might be able to point me in the right direction?

Improve this question

1 Answer 1

Reset to default
3

Honestly, I wouldn't even mess with that plugin since that's what it's supposed to do. Just do a simple ajax call and append the data like this. Note the move of #articles to the main template, and paginate_base parameter in the embed template.

Main Template

<html>
    <head></head>
    <body>
        <section id="articles">
            {embed="main/embed"}
        </section>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //set the click listener on pagination
                paginationClickHandler();
            });

            function paginationClickHandler() {
                $(".pagination li a").click(function(e){
                    e.preventDefault();

                    //link to the next set of articles
                    var href = $(this).attr("href");

                    //get new articles and pagination
                    $.get(href, {}, function(data){
                        //remove existing pagination
                        $(".pagination").remove();

                        //add new articles and pagination links
                        $("#articles").append(data);

                        //disable pagination click listener
                        $('.pagination li a').off('click');

                        //set new click listener with new pagination links
                        paginationClickHandler();
                    });
                });
            }
        </script>
    </body>
</html>

Main/Embed Template

{exp:channel:entries channel="page" sort="asc" orderby="title" limit="10" paginate="bottom" paginate_base="main/embed" dynamic="no"}
        <article>
            <h2>{title}</h2>
            {page_summary}
        </article>
        {paginate}
            {pagination_links}
                <ul class="pagination">
                    {next_page}
                        <li><a href="{pagination_url}">Show More</a></li>
                    {/next_page}
                </ul>
            {/pagination_links}
        {/paginate}
    {/exp:channel:entries}
Improve this answer
4
  • Perfect. Thanks man. I just had to modify a little to bring the jQuery script in before the embed to make it work.
    – doubleplusgood
    Mar 18, 2015 at 17:22
  • Hi doubleplusgood, can you please illustrate how you got this working. I can't seem to get my head around it and when I use the code above it just works like the normal pagination. Thanks :)
    – Kippi
    Mar 2, 2017 at 12:10
  • Brandon's solution works great but... when I press the button once only. 10 items have been added to the current list but the second click is refreshing the page and sending to .../P30. So the question is: how to add more items clicking more than one time?
    – Bosmi
    Apr 8, 2019 at 18:00
  • Hey Bosmi, I've updated the script to have the click listener in the parent, which should allow multiple "loads" of articles. I didn't test this, but I think it should work. I also added some comments to show what I'm doing in the jQuery.
    – BrandonOHara
    Apr 9, 2019 at 18:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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