果园无限卷轴答案

【问题标题】：Orchard infinite scroll果园无限卷轴
【发布时间】：2014-03-24 13:35:20
【问题描述】：

我正在尝试使用“无限 Ajax 滚动”Orchard 模块。

https://gallery.orchardproject.net/List/Modules/Orchard.Module.Orchard.jQuery.Ias

我通过管理界面安装了模块。我对给定链接进行了必要的修改。此外，我还必须进行 cmets 中描述的额外修改。

无限滚动的东西不起作用。我创建了大约 30 篇博客文章来测试它。当我通过公共网站滚动浏览博客文章时，加载了第一页 og 博客文章，当我滚动到底部时，什么也没有发生。寻呼机不可见（预期），但没有新内容附加到列表底部（不预期）。

当我使用管理界面滚动浏览博客文章并充分向下滚动时，Chrome 控制台会报告几件事：

Uncaught Error: Syntax error, unrecognized expression: <!DOCTYPE html> 
<html lang="en-US" class="static orchard-blogs"> 
<head> 
    <meta charset="utf-8" />
    <title>Proba - Manage Infinite Blog</title> 
    <link href="/OrchardLocal/Modul...<omitted>...l> jquery-1.9.1.js:4421
Sizzle.error jquery-1.9.1.js:4421
tokenize jquery-1.9.1.js:5076
select jquery-1.9.1.js:5460
Sizzle jquery-1.9.1.js:3998
jQuery.fn.extend.find jquery-1.9.1.js:5576
jQuery.fn.jQuery.init jquery-1.9.1.js:196
jQuery jquery-1.9.1.js:62
jQuery.fn.jQuery.init jquery-1.9.1.js:201
jQuery jquery-1.9.1.js:62
(anonymous function) jquery.ias.min.js:210
fire jquery-1.9.1.js:1037
self.fireWith jquery-1.9.1.js:1148
done jquery-1.9.1.js:8074
callback

过了一会儿：

GET http://localhost:30321/modules/orchard.jquery.ias/styles/images/loader.gif 404 (Not Found) jquery-1.9.1.js:6469
jQuery.extend.buildFragment jquery-1.9.1.js:6469
jQuery.extend.parseHTML jquery-1.9.1.js:531
jQuery.fn.jQuery.init jquery-1.9.1.js:149
jQuery jquery-1.9.1.js:62
get_loader jquery.ias.min.js:266
show_loader jquery.ias.min.js:279
paginate jquery.ias.min.js:167
scroll_handler jquery.ias.min.js:99
jQuery.event.dispatch jquery-1.9.1.js:3074
elemData.handle jquery-1.9.1.js:2750

在管理界面中，我检查了博客属性，它似乎配置得很好。 [Container, Item, Pager, NextAnchor] 的所有默认值都已到位，并且当报告错误发生时，这些值也存在于我正在查看的 html 文件中。

编辑（在 justrhysism 的回答之后）

在实现 justrhysism 的答案后，我专注于为什么无限滚动在仪表板中有效，但在前端无效。当我在仪表板中打开博客文章列表时，我找到了 .pager 元素。

<ul class="pager">
    <li class="first"><span>1</span></li>
    <li><a href="/OrchardLocal/Admin/Blogs/42?page=2">2</a></li>
    <li class="last"><a href="/OrchardLocal/Admin/Blogs/42?page=2">&gt;</a></li>
</ul>

我在前端打开了一个博客列表，也找到了 .pager 元素。

<ul class="pager" shape-id="92" style="display: none;">
    <li class="first" shape-id="92"><span shape-id="93">1</span></li>
    <li shape-id="92"><a href="/OrchardLocal/new-infinite-blog?page=2" shape-id="95">2</a></li>
    <li shape-id="92"><a href="/OrchardLocal/new-infinite-blog?page=2" shape-id="98">&gt;</a></li>
    <li class="last" shape-id="92"></li>
</ul>

然后我检查了负责触发内容异步加载的 javascript。

function paginate(curScrOffset, onCompleteHandler)
        {
            urlNextPage = $(opts.next).attr("href"); // evaluates to $(".zone-content .pager .last a").attr("href")
            ...............
        }

发现 urlNextPage 变量在前端视图中总是设置为 undefined。

【问题讨论】：

标签： orchardcms infinite-scroll

【解决方案1】：

问题

我以前遇到过这种情况。这是一个文档解析错误。 Orchard 返回的文档顶部有一个空白字符（某些描述），而不是预期的<!。对 AJAX 和文档解析有更多了解的人可以更好地描述这一点。

解决方案

要解决此问题，请在 Orchard 的核心（位于 src\Orchard.Web\Core\Shapes\Views）中找到视图 Document.cshtml，并将其复制到主题的视图目录中。

在这个文件中，查看Line 10，<!DOCTYPE html> 的起始位置。在此之上，删除右大括号 } 和 DOCTYPE 声明之间的换行符。

之前：

}
<!DOCTYPE html>

之后：

}<!DOCTYPE html>

这应该可以解决您的问题。

【讨论】：

酷。这修复了错误并且无限滚动现在在仪表板中工作。仍然无法在前端工作。既然你已经帮了我这么多，我会再努力一点......
启动 Fiddler 并查看 AJAX 调用的响应。它可能仍然只是一个解析错误，但 Fiddler 会帮助您确定在哪里。有时我也喜欢直接通过 Chrome 的控制台进行 AJAX 调用，看看错误是服务器端的还是客户端的。

【解决方案2】：

Orchard CMS 的无限 Ajax 滚动模块在 Github 上

https://github.com/grapto/js.Ias

【讨论】：

这个问题的答案如何？
你需要说明为什么你的答案应该被考虑，而不是假设任何到达这个页面的读者都会知道你想说什么。

【解决方案3】：

作为对我上次编辑的回应，其中 urlNextPage 被设置为未定义。

我更改了博客属性中的 NextAnchor 选择器：从默认值“.zone-content .pager .last a”---->到“.zone-content .pager a”。

我还进入了 Orchard.jQuery.Ias 模块 -> Scripts/jquery.ias.min.js

更改了分页功能。老：

function paginate(curScrOffset, onCompleteHandler)
        {
            urlNextPage = $(opts.next).attr("href");
            ....

新：

function paginate(curScrOffset, onCompleteHandler)
        {
            if ($(opts.pagination).find(".last span").length)
                return; // if span element exists in .last element, that means we are on the last page
            urlNextPage = $(opts.next).last().attr("href");
            ....

现在在仪表板和前端都可以正常工作。这不是一个非常可靠的解决方案，因为我假设 .pager 中的最后一个锚标记将始终指向下一页。该假设仅基于我对模块行为的观察。

【讨论】：