Loading entries in ExpressionEngine with AJAX

Question

I am looking to load entries from ExpressionEngine in a popup modal with an ajax call using jQuery, the idea is when the user clicks on the entry title it will open show a modal with the full entry in it. I am then looking to have a next & previous button on the modal which will allow me to move to the next and previous entries within the popup modal. I don’t know if it is best to load the template or a feed, i.e. JSON, or if there is another way I am happy to hear.

Has anyone attempted this yet or know of a tut that maybe helpful. I have come across this article which sheds some light on it, http://spibey.com/blog/2011/11/using-partial-views-in-the-expressionengine-control-panel-for-ajax-requests-or-similar/

Answer 1

That tutorial you linked to is for the control panel. Since you are talking about content on the front end, you can do it all in EE templates with regular old EE tags.

I recommend having a template group to hold your html fragments. In this case it might be convenient to put the entry body and the entry links into a single template

ajax.group
    - single_entry.html

Then, at its simplest, in that template you'd have

<div id="entry-body">
    {exp:channel:entries channel="channel_name_here" entry_id="{segment_3}"}
        <h2>{title}</h2>
        {body}
    {/exp:channel:entries} 
</div>

<div id="entry-links">
    {exp:channel:next_entry}        
        <a href="{path='ajax/single_entry'}" class="next">Next</a>
    {/exp:channel:next_entry} 
    {exp:channel:prev_entry}
        <a href="{path='ajax/single_entry'}" class="prev">Previous</a>
    {/exp:channel:prev_entry}
</div>

When you request those fragments using ajax, be sure to pass the current entry_id or url_title as a url segment so that the fragment template loads the correct data for you. You can pass a selector to load() in order to grab the desired chunk of html and load it into the appropriate container on your page. At its simplest, something like

$('#entry-container').load('ajax/single_entry/2 #entry-body');
$('#entry-links').load('ajax/single_entry/2 #entry-links');

where the 2 is the entry_id of the entry you are loading. See http://api.jquery.com/on/

Finally, you'd need to have jQuery event listeners on the next and previous entry links so that they trigger jQuery load() to load the next entry. Here is an example of this for the .next link.

$(document).on('click', '.next', function(event) {
    var url = $(this).attr('href');
    $('#entry-container').load(url); // load the html into your chosen DOM element
    event.preventDefault(); // prevent the browser from navigating to this page     
});

See http://api.jquery.com/on/