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

时间:2014-12-16 07:21:48

标签: jquery ajax overlay atg

我的要求如下。 我正在使用自定义Droplet(ATG)获取地址列表。 现在我需要在叠加层上显示地址列表。 前5个addreesess然后当我点击下一个按钮时,我需要显示接下来的五个addreeses。

我面临的问题是每当我点击下一个按钮时,整个页面都会重新加载,接下来的五个附加内容会显示在正常页面中。

谢谢, Neenu

1 个答案:

答案 0 :(得分:0)

这不是ATG特定的问题,而是更多的一般客户端/服务器端代码交互问题。

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

从您的问题标签看起来您正在使用JQuery并希望使用AJAX。此外,由于您提到使用Droplet,我假设您使用的是JSP而不是REST / JSON的服务器端页面呈现。

叠加层通常的工作方式是叠加层的内容已经渲染并发送到浏览器。在浏览器中,使用CSS隐藏包含叠加层的div。当适当的事件发生时(例如,点击链接或按钮),则会显示重叠div。 “州”#39;覆盖 - 无论是显示还是隐藏 - 都不会保存在服务器上的任何位置。它仅存在于客户端浏览器的内存中。

现在,您似乎想要在叠加层中进行分页。也就是说,您希望一次显示五个地址,并且能够前进或后退以显示下五个或前五个。并且您希望叠加层保持打开状态。

这需要仔细规划客户端应该发生的事情,服务器上应该发生什么以及两者之间的交互应该是什么。

这里使用的一般模式是

选项A - 客户端分页

使用JSP中的Droplet在div中呈现所有地址,每个地址包含五个地址并发送给客户端,并使用JavaScript和CSS(JQuery)来显示div包含您要显示的范围并隐藏其他范围。

此选项使用服务器上的JSP和Droplet初始呈现页面,但使用JavaScript和CSS完全是客户端分页

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

选项B - 服务器端分页

创建一个新的JSP页面来表示只是叠加层的内容,并使用Range droplet(或相关衍生物)仅渲染要在其中显示的五个地址 - 使用查询字符串参数提供startIndex等。

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

地址列表中的Next和Previous链接也应该使用相应的startIndex对此URL进行类似的AJAX GET调用。

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