Trying the Partial Refresh Optimizes by Sven Hasselbach - xpages

Question

I set up a really simple little test page with this code:
<xp:panel id="panelAll">
<xp:panel rendered="#{javascript:(viewScope.vsPanelRed) ? true : false;}" style="background-color:rgb(255,0,0)">
Panel Red
</xp:panel>
<xp:panel
rendered="#{javascript:(viewScope.vsPanelRed) ? false : true;}"
style="background-color:rgb(0,255,0)">
Panel Green
</xp:panel>
</xp:panel>
<xp:br></xp:br>
<xp:panel id="panelMain">
<xp:button value="Label" id="button1">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script>
<![CDATA[XSP.partialRefreshPost('#{id:panelAll}',{clearForm: true});]]>
</xp:this.script>
<xp:this.action><![CDATA[#{javascript:println( "in Click Button");
if (viewScope.vsPanelRed == true){
viewScope.vsPanelRed = false;
}else{
viewScope.vsPanelRed = true;
}
}]]>
</xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:panel><!-- panelMain -->
the action toggles the viewScope vsPanelRed from true to false and displays either the red panel or the green on. If I use the conventional refreshMode="partial" refreshId="panelAll" on the eventHandler for the onclick the panel toggles if I use the partialResheshPost as the blog says (and I think I have it entered correctly the partial refresh does not happen infact the action to toggle the vsPanelRed does not happen either. So I must have something wrong in the ![CDATA ] but I can't figure out why.
What am I missing?

Answer 1

Sven Hasselbach did not include support for event handlers in his optimized partial refresh. I have extended his solution to include support for this - see my blog post "XPages: Optimized partial refreshes for event handlers".
If you include my optimized version as a xp:scriptBlock on your XPage then you need to change your button to this:
<xp:button value="Label" id="button1">
<xp:eventHandler id="submitEventHandler" event="onclick" submit="false">
<xp:this.script>
<![CDATA[
XSP.partialRefreshPost(
'#{id:panelAll}',
{clearForm: true, submitid: '#{id:submitEventHandler}'}
);
]]>
</xp:this.script>
<xp:this.action><![CDATA[#{javascript:
println( "in Click Button");
if (viewScope.vsPanelRed == true){
viewScope.vsPanelRed = false;
}else{
viewScope.vsPanelRed = true;
}
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>