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/

Which modal plugin are you using? Most will let you load a template as an iframe in the modal window. You can then code that template just as you normally would and it will correctly move through previous/next buttons. — Anna_MediaGirl, Oct 30 '12 at 15:29

score 14 · Accepted Answer · edited Jul 27 '14 at 23:18

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/

Thanks, that is a great answer and you break it down well. Would you suggest using a modal popup already, e.g. fancybox or something similar or would you create your own function to allow the AJAX to work better? I good example of what i am trying to achieve is the Google Chrome store functionality in the Chrome browser, when you click on an app to find out more you get a popup. I deally i would be looking to put the button on the outside of the modal, but i guess i would be able to manage that with a custom popup and some plugins already avaliable — zizther, Oct 30 '12 at 20:45
To be honest using Fancybox (or similar) and an iframe (as @MediaGirl mentioned in her comment above) is probably going to do just what you need and save some effort. You'd still want to create a similar page fragment template to suit your purposes, but it would just be loaded in an iframe in the modal window. But going totally custom, or combining this ajax approach with modal plugin, would probably give you a little more freedom. Hard to say which is better for your situation. — Alex Kendrick, Oct 30 '12 at 21:02
I take it this doesn't change the URL so that people can come back to it and the popup open? — zizther, Oct 30 '12 at 21:03
That's correct. It does not. If you want to completely support "deep linking" of ajax content (automatically loading ajax content into the modal based on a hash the url) then I believe you'll have to use something like [jQuery BBQ](http://benalman.com/projects/jquery-bbq-plugin/) in conjunction with whatever approach you use for modal windows. — Alex Kendrick, Oct 30 '12 at 21:16

Loading entries in ExpressionEngine with AJAX

1 Answers1