ajax - 在 Typo3 中使用 ajax 加载时，Paginate Widget 会破坏布局

问题描述

在将分页小部件与ajax. 我正在做的是，我选择类别，然后通过在模板中加载数据并返回html如下内容来点击 ajax 请求来获取相应的列表：

<f:if condition="{articles}">
<f:then>
    <f:widget.paginate objects="{articles}" as="paginatedArticles" configuration="{itemsPerPage: numberOfRecords}">
        <f:for each="{paginatedArticles}" as="article">
            <h2>
                <f:link.action action="show" arguments="{article : article}"> {article.title}</f:link.action>
            </h2>
            <p>
                <f:format.html>{article.description}</f:format.html>
            </p>
            <hr/>
        </f:for>
    </f:widget.paginate>
</f:then>
<f:else>
    No Records Found
</f:else>

在我的控制器中，我ajaxMethod只是在做

$this->view->assign('articles', $result);所以它用我的结果加载模板。

但是现在在渲染 ajax 之后，如果我使用分页，视图就会中断。没有样式或标题或任何东西。

这就是当我单击分页小部件上的下一个时它的显示方式：http: //prntscr.com/kr8vg0

只是为了完整起见，这里是setup.txt我写的调用 ajax 的。

// PAGE object for Ajax call:
tt_content.list.20 = CASE
tt_content.list.20 {
    key.field = list_type
}

ajax = PAGE
ajax {
    typeNum = 1272
    config {
        disableAllHeaderCode = 1
        disablePrefixComment = 1
        additionalHeaders {
            1526302502.header = Content-Type: text/html;charset=utf-8
        }
    }

10 = CONTENT
10 {
    table = tt_content
    select {
          pidInList = this
          orderBy = sorting
          where = (list_type IN ("articleext_list"))
    }
    renderObj = < tt_content.list.20
    }
}

任何帮助，将不胜感激。

标签： ajaxtypo3fluidtypo3-7.6.xtypo3-extensions

解决方案

驱动（应该驱动）来自小部件的typeNumXHR 请求，是从 Fluid 扩展中添加的，不需要您添加特殊PAGE对象。

即使您以某种方式进行了调用特定控制器操作的覆盖，也可能无法正确处理。通常，您永远不会引用内容元素实例，而是直接引用 Extbase 请求引导。除其他外，因为渲染内容对象会添加包装器。

因此，您应该删除它并确保将 QueryResult 传递给分页小部件。然后在必要时覆盖小部件模板。其余的应该可以工作而无需配置 TS。

编辑：

在通过 XHR 呈现的模板中使用的分页小部件本身意味着它传输您用于加载 XHR 的参数 - 包括自定义typeNum值。然后，该小部件会创建标准链接，您可以像平常一样单击它们——它们将成为 XHR 响应的“内部内容”的链接，因为 URL 包含类型编号。

这就是它变得糟糕的地方：一旦添加了这个 typeNum，你就不能删除它。因此，您将不得不改为导致单击下一个/上一个等链接，以导致加载内容的新 XHR 请求（您如何执行此操作很大程度上取决于您的 JS 应用程序，因此无法引导您到那里）。

我关于确保 QueryResult 的评论是不相关的，除非您的页面没有更改，例如您总是看到项目 1-10。

但为了解决这个问题，我实际上建议您不要使用分页小部件。主要原因是您已经处于 XHR 上下文中，它允许您接收控制器操作的参数并从控制器操作中操作查询的offset和limit部分。这意味着您可以生成链接而不是小部件，而是控制器操作，例如，在应该触发 XHR 请求的链接上放置一个 CSS 类，而不是应该重新加载整个页面的链接（例如显示详细视图） . 您避免必须覆盖分页模板，并控制所有链接的所有参数。

事实上，offset无论是否使用 XHR，我都赞成使用分页小部件的控制器参数。有一长串技术原因我不会在这里列出，但我只想说，为了必须创建一个参数而交易大量“黑匣子”是一件非常合理且可预测的结果。

ajax - 在 Typo3 中使用 ajax 加载时，Paginate Widget 会破坏布局

问题描述

解决方案

推荐阅读