jquery - Overlay to dynamically show a list of values in ATG -

my requirement follows. getting list of addresses using a custom droplet(atg). need show list of addreses on overlay. first 5 addreesess , when click on next button, need show next 5 addreeses.

the problem facing whenever clicking next button, whole page getting reloaded , next 5 addreeses shown in normal page.

thanks, neenu

this less of atg-specific question , more of general client-side/server-side code interaction question.

a standard form submit or link result in whole page being replaced contents of target url - if same page. if displaying overlay in response event on page, reloading page result in state being lost

from question tags looks using jquery , want use ajax. also, since mention using droplet, assume using server-side page rendering jsp , not rest/json.

the way overlays work contents of overlay rendered , sent browser. in browser, div containing overlay hidden using css. when appropriate event occurs (e.g. clicking on link or button), overlay div shown. 'state' of overlay - whether shown or hidden - not held anywhere on server. exists in in-memory dom of client browser.

now, looks want pagination within overlay. is, want display addresses 5 @ time , able go forwards or backwards display next 5 or previous five. , want overlay remain open.

this needs careful planning of should happen in client, should happen on server , should interactions between two.

the general patterns use here be

option a - client-side pagination

use droplet in jsp render all of addresses in divs containing 5 addresses each , send client, , use javascript , css (jquery) show div containing range want display , hide other ones.

this option uses jsp , droplets on server render page initially, pagination entirely client-side using javascript , css

this option has advantage pagination quick in browser, has disadvantage has load addresses repository , send them browser

option b - server-side pagination

create new jsp page represent just contents of overlay, , use range droplet (or related derivative) render 5 addresses want display in - using query string parameters provide startindex etc.

in client code, in response event when want show overlay, should make ajax get request page fragment , replace inner div of overlay response. jquery, along lines of $("#overlay").load(".../.../addresses.jsp?startindex=1") overlay id of div representing contents of overlay.

the next , previous links in address list should make similar ajax get calls url, appropriate startindex.

this option has disadvantage (considerably) more complex, allows load addresses need , send content browser when needed displayed.