11

我正在寻找使用 jQuery 的 ajax 调用在弹出模式中加载来自 ExpressionEngine 的条目，这个想法是当用户单击条目标题时，它将打开显示一个包含完整条目的模式。然后我希望在模式上有一个下一个和上一个按钮，这将允许我移动到弹出模式中的下一个和上一个条目。我不知道是否最好加载模板或提要，即 JSON，或者是否有另一种我很高兴听到的方式。

有没有人尝试过这个或者知道一个可能有用的 tut。我看到这篇文章对此有所了解，http://spibey.com/blog/2011/11/using-partial-views-in-the-expressionengine-control-panel-for-ajax-requests-or -相似的/

4

1 回答 1

14

您链接到的该教程适用于控制面板。由于您在讨论前端的内容，因此您可以在 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 事件侦听器，以便它们触发 jQueryload()加载下一个条目。这是.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/

于 2012-10-30T15:22:26.200 回答