How can I maintain scroll position across postbacks in JSF? - jsf

Question

I am using JSF frontend for a page where an image is uploaded or deleted. Clicking on the upload or delete button causes a postback and the page to reload with the updated status. This however, resets the scroll position of the page. How should I go about retaining the scrollback of this page on the postback actions.

Answer 1

You can do that with an actionListener. For example, in your page (page.jsf for example):
<f:view>
<h:form>
<h:commandLink actionListener="#{bean.method}">
<h:outputText value="Submit" />
<f:param name="anchor" value="image" />
</h:commandLink>
</h:form>
<div id='result'>
<h1><a name='image'>Image</a></h1>
</div>
</f:view>
And the managed bean looks like:
public class Bean {
public void method(ActionEvent actionEvent) {
// Get parameter
String ancla = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("anchor");
try {
FacesContext.getCurrentInstance().getExternalContext().redirect("page.jsf#" + anchor);
} catch (IOException e) {
e.printStackTrace();
}
}
}
Hope this helps

Answer 2

If you are using Apache MyFaces Tomahawk, you can set the parameter AUTOSCROLL then make sure AutoScrollPhaseListener is enabled.
I'm not sure this functionality is specified by JSF, but instead is something extra implemented by Apache MyFaces Tomahawk.
Also, be aware that prior to version 1.1.6, there is a cross-site scripting vulnerability in the AUTOSCROLL implementation.

Answer 3

you can use jquery.. Using cookies..
in ready function
$(function(){
//set window scroll position if cookie is set
window.scroll(0,getCookie('myCookie'));
//unset cookie after setting scroll position
deleteCookie('myCookie');
//make this class objects keep page scroll position
jQuery(window).unload(function() {
setCookie('myCookie', getPageScroll());
});
//-------------------
});
after ready function add this functions..
function setCookie(name,value) {
var date = new Date();
date.setTime(date.getTime()+(10*1000));
var expires = "; expires="+date.toGMTString();
document.cookie = name+"="+value+expires+"; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function deleteCookie(name) {
setCookie(name,"",-1);
}
i wish this help you..