Xpages: Cannot get OnClick event in Navigator to fire - xpages

Question

I am trying to build a dynamic navigator for a document database. The navigator build correctly by using a repeat node (I got this from a post by Per) and I can put page or basic nodes in the repeat node and everything looks good, but I need to set a scope variable and then refresh the view element, and I cannot get that code to fire.
I have included the code for the navigator below. Any help would be greatly appreciated, I have scoured Stack Overflow and tried adding events manually all to no avail.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xe:navigator
id="navigator1"
expandable="false">
<xe:this.treeNodes>
<xe:repeatTreeNode
var="navEntry"
indexVar="index"
loaded="true">
<xe:this.children>
<xe:pageTreeNode
rendered="true"
page="/xpViewAllDocs.xsp">
<xe:this.label><![CDATA[#{javascript:var dbName=#DbName();
var arr = #Unique(#Trim(#DbColumn(dbName,"alldocslookup",1)))
arr[index]}]]></xe:this.label>
</xe:pageTreeNode>
</xe:this.children>
<xe:this.value><![CDATA[#{javascript:var dbName=#DbName();
#Elements(#Unique(#Trim(#DbColumn(dbName,"alldocslookup",1))))}]]></xe:this.value>
</xe:repeatTreeNode>
</xe:this.treeNodes>
<xp:eventHandler
event="onItemClick"
submit="true"
refreshMode="complete">
<xe:this.action><![CDATA[#{javascript:viewScope.put("key","Test");
view.postScript("alert('Client Side JavaScript executed!')");}]]></xe:this.action>
</xp:eventHandler></xe:navigator>
</xp:view>
EDIT:
I tried all of the suggestions below but none of them worked.
I can get this to work by simply putting a link in the repeat or a computed field or something like that, but then it doesn't really look the navigation element at all. If I can just change the css some to make it look like the navigation I would be happy. I have taken a stab at it with a list container, but it is not working:
I feel like I am kind of close. What can I go to get this to look more like a navigator?
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xe:list
id="list1"
styleClass="lotusMenuHeader">
<xp:link
role="menuItem"
styleClass="lotusSelected"> All Documents</xp:link>
<xp:link>Tag 1</xp:link>
<xp:link>Tag 2</xp:link>
</xe:list>
<xp:panel>
<ul
header="lotusMenuHeader">
<li
class='lotusSelected'>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</xp:panel>
</xp:view>

Answer 1

onItemClick doesn't seem to work with pageTreeNode. The event doesn't get rendered at all.
Use basicLeafNode instead. onItemClick does work with it well.
Put the current clicked value into sessionScope variable with context.getSubmittedValue().
Redirect to you target XPage with context.getSubmittedValue().
<xe:navigator
id="navigator1"
expandable="false">
<xe:this.treeNodes>
<xe:repeatTreeNode
var="navEntry">
<xe:this.children>
<xe:basicLeafNode
label="#{navEntry}"
submitValue="#{navEntry}" />
</xe:this.children>
<xe:this.value><![CDATA[#{javascript:var dbName=#DbName();
#Unique(#Trim(#DbColumn(dbName,"alldocslookup",1)))}]]></xe:this.value>
</xe:repeatTreeNode>
</xe:this.treeNodes>
<xp:eventHandler
event="onItemClick"
submit="true"
refreshMode="complete">
<xe:this.action><![CDATA[#{javascript:
sessionScope.key = context.getSubmittedValue();
context.redirectToPage("xpViewAllDocs.xsp")}]]></xe:this.action>
</xp:eventHandler>
</xe:navigator>