使用AJAX在ExpressionEngine中加载条目

Question

我希望使用jQuery在一个带有ajax调用的弹出模式中加载ExpressionEngine中的条目,这个想法是当用户点击它将打开的条目标题时显示一个带有完整条目的模态.然后我想在模态上有一个下一个和上一个按钮,这将允许我移动到弹出模式中的下一个和前一个条目.我不知道是否最好加载模板或提要,即JSON,或者如果有其他方式我很乐意听到.

有没有人尝试这个或知道可能有帮助的啧啧.我已经看过这篇文章了解了它,http://spibey.com/blog/2011/11/using-partial-views-in-the-expressionengine-control-panel-for-ajax-requests-or -类似/

Answer 1

您链接的教程适用于控制面板.由于您正在讨论前端的内容,因此您可以使用常规的旧EE标记在EE模板中完成所有操作.

我建议有一个模板组来保存你的html片段.在这种情况下,将条目主体和条目链接放入单个模板可能很方便

ajax.group
    - single_entry.html

然后,最简单的,就是你所拥有的那个模板

<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>

当您使用ajax请求这些片段时,请确保传递当前entry_id或url_title作为url段,以便片段模板为您加载正确的数据.您可以传递选择器以load()获取所需的html块并将其加载到页面上的相应容器中.最简单的,像是

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

其中2是entry_id您要加载的条目.见http://api.jquery.com/on/

最后,您需要在下一个和上一个条目链接上安装jQuery事件侦听器,以便它们触发jQuery load()来加载下一个条目.以下是.next链接的示例.

$(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     
});

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