Search code examples
expressionengine

load expressionengine data dynamically


I'm trying to figure out how to get content dynamically from expression engine. Basically I have 6 article summaries as content. When the page loads, I'm getting 3 summaries, but I have a "show more" button. When it's clicked, I want to load the next 3 summaries but I don't know how to do this.

this is what my tags look like now:

{exp:channel:entries channel="blogposts" limit="3"}
    <div class='article-box'>
        <div class="article-image-box">
            <div class="article-image">

            </div>
        </div>
        <article>
            <h4>{title}</h4>
            <p class='author'>{blog_author}</p>
            <p>
                {blog_body}
            </p>
           <div class="ful-art-but-box">
                <button class="button green-but">
                    READ FULL ARTICLE
                </button>
            </div>
        </article>
    </div>

{/exp:channel:entries}

Solution

  • If you want your visitors to be able to "Load More" repeatedly as your content increase then Jelle's solution will not suffice.

    To "future proof" it I would approach this by creating an EE template that returns entries in sets of three in JSON format, let's call it "more.json"

    The "Load More" button would make an AJAX request to more.json. It would need to specify an offset (the first time the button is hit it would need to return results 7 - 9 the next time it is hit it would need to return results 10 - 12 and so on).

    You could pass the offset as a url segment like so:

    your_template_group/more.json/6
    

    The template more.json would take the value in the request segment_3 and pass this to the channel entries function, like so:

    {exp:channel:entries channel="blogposts" limit="3" disable="" offset="segment_3"}
    

    I'd use jQuery to handle the AJAX, append the results, update the button state etc. There are many tutorials on this site and elsewhere explaining how to accomplish this.