Change a buttons style-class on partial refresh

Question

I have a series of buttons in a panel (id="panelButtons") which is nested inside another panel (id="panelView"). at the moment the onclick event on each of the buttons sets a sessionScope variable and does a partial refresh on panelView. The buttons look like this:

<xp:button value="Home" id="button1">
            <xp:this.styleClass>
            <![CDATA[#{javascript:(sessionScope.ssSelectedView == "ccHome.xsp") ? "btn btn-primary btn-xs" : "btn btn-default btn-xs"}]]></xp:this.styleClass>
            <xp:eventHandler event="onclick" submit="true"
                refreshMode="partial" refreshId="panelView">
                <xp:this.action><![CDATA[#{javascript:sessionScope.ssSelectedView = "ccHome.xsp"}]]>
                </xp:this.action>
            </xp:eventHandler>
        </xp:button>
        &#160;
        &#160;
        <xp:button value="Products" id="button2">
            <xp:this.styleClass>
            <![CDATA[#{javascript:(sessionScope.ssSelectedView == "ccProducts.xsp") ? "btn btn-primary btn-xs" : "btn btn-default btn-xs"}]]></xp:this.styleClass>
            <xp:eventHandler event="onclick" submit="true"
                refreshMode="partial" refreshId="panelView">
                <xp:this.action><![CDATA[#{javascript:sessionScope.ssSelectedView = "ccProducts.xsp"}]]>
                </xp:this.action>
            </xp:eventHandler>
        </xp:button>

So what I want to do is display the button as btn-primary if the sessionScope is set otherwise use the default. When the page loads the sessionScope is set to "ccHome.xsp" but if I click on the Products button the sessionScope changes but the button display does not. So it appears that the style class is only computed on the Page Load. The JavaScript is set to run Dynamically so short of a full refresh is there a way to force the style class to change on a partial refresh.

Edit: Set the onClick to do a full Update and it does not change the style class on the buttons either.

Thomas Adrian Thomas Adrian · Accepted Answer · 2015-02-21T12:30:35

The reason it is not working is because the bootstrap theme is overriding your styleClass, You need to disable the theme on the buttons

<xp:button value="Home" id="button1" disableTheme="true">

Change a buttons style-class on partial refresh

1 Answers