I'm attempting to create a menu component in jsf that uses ajax to navigate between pages. The menu contains client side state in javascript (eg. expanded sections and folders).
The following code is what I'm working with right now. The problem I have is that clicking on a link to navigate between pages refreshes the whole page which resets the state of the menu. I would like the state of the menu to be kept the same. Is there some way to do this in jsf?
layout.xhtml:
[code]
<h:head>
<script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(window).delegate('li.folder a', 'click',
function(){
var $ul = $(this).siblings('ul');
if ($ul.is(':visible')) {
$ul.hide();
} else {
$ul.show();
}
});
});
</script>
</h:head>
<h:body>
<div id="page">
<h:form id="menu">
<f:ajax render=":content">
<ul>
<li><h:commandLink action="/index" value="index"/></li>
<li class="folder">
<a href="javascript:void(0);">Folder</a> (click to expand)
<ul style="display:none;">
<li><h:commandLink action="/page1" value="page1"/></li>
<li><h:commandLink action="/page2" value="page2"/></li>
</ul>
</li>
</ul>
</f:ajax>
</h:form>
<h:form id="content">
<ui:insert name="content"/>
</h:form>
<h:messages/>
</div>
</h:body>
[/code]
page1.xhtml:
[code]
<ui:composition template="/layout.xhtml">
<ui:define name="content">
<h1>page1</h1>
</ui:define>
</ui:composition>
[/code]
page2.xhtml:
[code]
<ui:composition template="/layout.xhtml">
<ui:define name="content">
<h1>page2</h1>
</ui:define>
</ui:composition>
[/code]
[Message sent by forum member 'istls']
http://forums.java.net/jive/thread.jspa?messageID=481561