Jquery 使用AJAX在ExpressionEngine中加载条目

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

---

有没有人尝试过这个，或者知道一个可能有用的图坦卡蒙。我看到了这篇文章，它对这一点有一些启发，你链接到的教程是针对控制面板的。因为您谈论的是前端的内容，所以您可以在带有常规旧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>

其中

2

是您正在加载的条目的

条目id

。看

最后，您需要在下一个和上一个条目链接上有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     
});

---

请参见

您使用的是哪种模式插件？Most将允许您在模式窗口中将模板作为iframe加载。然后，您可以像往常一样编写该模板，它将正确地通过上一个/下一个按钮。谢谢，这是一个很好的答案，您可以很好地分解它。您是否建议已经使用一个模式弹出窗口，例如fancybox或类似的东西，或者您是否会创建自己的函数以允许AJAX更好地工作？我尝试实现的一个很好的例子是Chrome浏览器中的Google Chrome商店功能，当你点击一个应用程序以了解更多信息时，你会得到一个弹出窗口。我真的很想把按钮放在模式的外面，但是我想我可以通过一个自定义弹出窗口和一些已经可用的插件来管理它。老实说，使用Fancybox（或类似的）和iframe（正如@MediaGirl在她上面的评论中提到的）可能会做你需要做的事情并节省一些精力。您仍然希望创建一个类似的页面片段模板来满足您的目的，但它只会加载到模式窗口中的iframe中。但是完全定制，或者将这种ajax方法与模式插件相结合，可能会给您更多的自由。很难说哪一个更适合你的情况。我认为这不会改变URL，这样人们就可以返回到它并打开弹出窗口？这是正确的。事实并非如此。如果您想完全支持ajax内容的“深度链接”（根据url中的哈希值自动将ajax内容加载到模式中），那么我相信您必须将类似的东西与用于模式窗口的任何方法结合使用。

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