Trying the Partial Refresh Optimizes by Sven Hasselbach

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?

Per Henrik Lausten Per Henrik Lausten · Accepted Answer · 2014-09-20T09:11:27

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>

Trying the Partial Refresh Optimizes by Sven Hasselbach

1 Answers