我希望使用 jQuery 通过 ajax 调用在弹出模式中加载来自 ExpressionEngine 的条目,其想法是当用户单击条目标题时,它将打开显示一个包含完整条目的模式。然后,我希望在模式上有一个下一个和上一个按钮,这将允许我移动到弹出模式中的下一个和上一个条目。 我不知道加载模板或提要(即 JSON)是否最好,或者是否有其他我很高兴听到的方法。
是否有人尝试过此操作或知道可能有帮助的图解。我发现这篇文章对此有所启发,http://spibey.com/blog/2011/11/using-partial-views-in-the-expressionengine-control-panel-for-ajax-requests-or-similar/
最佳答案
您链接到的教程适用于控制面板。由于您正在谈论前端的内容,因此您可以使用常规的旧 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 block 并将其加载到页面上适当的容器中。最简单的是,类似于
$('#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
});
关于jquery - 使用 AJAX 加载 ExpressionEngine 中的条目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13138100/