使用AJAX在ExpressionEngine中加载条目

Question

使用AJAX在ExpressionEngine中加载条目

11

我希望使用jQuery通过ajax调用从ExpressionEngine中加载条目，以弹出模态框的形式展示完整的内容。我计划在模态框内添加上一个和下一个按钮，以便在弹出模态框内移动到前一篇或后一篇文章。我不知道是加载模板还是源文件（例如JSON），如果还有其他方法，我也愿意听取建议。

是否有人尝试过这种方法或者知道一些有用的教程？我找到了这篇文章，其中提供一些参考：http://spibey.com/blog/2011/11/using-partial-views-in-the-expressionengine-control-panel-for-ajax-requests-or-similar/。

- zizther

你在使用哪个模态框插件？大多数插件都允许在模态窗口中作为 iframe 加载模板。然后，您可以像平常一样编写该模板，并且它将正确地通过上一个/下一个按钮移动。 - Anna_MediaGirl

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex Kendrick · Accepted Answer

你链接的教程是关于控制面板的。既然你谈论的是前端的内容，你可以使用常规的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/