覆盖以动态显示ATG中的值列表。

Question

我的要求如下。我正在获得一个使用自定义液滴(ATG)的地址列表。现在我需要显示覆盖上的地址列表。首先是5个附件，然后当我单击next按钮时，我需要显示接下来的5个附件。

我面临的问题是，每当我单击“下一步”按钮时，整个页面都会重新加载，接下来的五个附件将显示在普通页中。

谢谢你，尼努

Answer 1

这不是一个ATG特有的问题，而是一个一般的客户端/服务器端代码交互问题。

一个标准的表单提交或链接将导致整个页面被替换为目标URL的内容--即使它是同一个页面。如果您正在响应页面上的事件显示覆盖，则重新加载页面将导致该状态丢失。

从您的问题标记来看，它看起来像是在使用JQuery，并且希望使用AJAX。另外，由于您提到了使用液滴，我假设您使用的是使用JSP的服务器端页面呈现，而不是REST/JSON。

覆盖的方式通常是覆盖的内容已经呈现并发送到浏览器。在浏览器中，包含覆盖层的div使用CSS隐藏。当发生适当的事件(例如单击链接或按钮)时，将显示覆盖div。覆盖的“状态”--无论是显示的还是隐藏的--在服务器上的任何地方都不会被保存。它只存在于客户端浏览器的内存中。

现在，看起来您想要在覆盖层中进行分页。也就是说，您希望一次显示五个地址，并能够向前或向后显示下五个地址或前五个地址。你希望覆盖层保持开放。

这需要对客户机中应该发生的事情、服务器上应该发生的事情以及两者之间的交互进行一些仔细的规划。

这里使用的一般模式是

选项A -客户端分页

使用JSP中的液滴呈现包含五个地址的div中的所有地址，并发送到客户端，并使用JavaScript和CSS (JQuery)显示包含要显示的范围的div，并隐藏其他地址。

此选项最初使用服务器上的JSP和微滴来呈现页面，但是分页完全是使用JavaScript和CSS的客户端。

此选项的优点是在浏览器中分页非常快速，但它的缺点是必须从存储库加载所有地址并将它们全部发送到浏览器。

选项B -服务器端分页

创建一个新的JSP页面，仅表示覆盖的内容，并使用一个Range液滴(或相关的导数)只呈现您想要在其中显示的五个地址--使用查询字符串参数来提供startIndex等。

在客户端代码中，为了响应需要显示覆盖的事件，还应该对此页面片段发出AJAX GET请求，并用响应替换覆盖层的内部div。对于JQuery，它将类似于$("#overlay").load(".../.../addresses.jsp?startIndex=1")，其中overlay是表示覆盖内容的div的id。

地址列表中的下一个和前面的链接也应该使用适当的GET对该startIndex进行类似的AJAX startIndex调用。

此选项的缺点是它(相当多地)更复杂，但允许您只加载所需地址，并且只在需要显示内容时才将内容发送到浏览器。