How can I change background color of commandButton after click
Hi all! I hope, I have very simple question - I have several commandButtons, each of them navigate you from current page to another one (diff for each button). The buttons are in template, so they are always on top, when navigate case appears. I have next task: I need to change the background color of the last pressed button. Example: I press 2nd button and its color set to red, then I press 4th button and now its color set to red and 2nd - return default color.
It's need to show to user in what page he currently located.
Here is my template:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<f:loadBundle basename="messages" var="msg" />
<title><ui:insert name="title">Default title</ui:insert></title>
<link href="../css/stylesheet.css" rel="styleSheet" type="text/css"/>
<link href="../css/newpage.css" rel="styleSheet" type="text/css"/>
<link href="../css/target-btn.css" rel="styleSheet" type="text/css"/>
<link rel="SHORTCUT ICON" href="../images/favicon.ico"/>
</head>
<body>
<f:view>
<ui:insert name="logout">
<h:form id="logoutForm">
<div style="float: right;"><h:commandLink value="[Logout]" action="#{loginBean.doLogout}" immediate="true"/></div>
</h:form>
</ui:insert>
<ui:insert name="buttons">
<style type="text/css">
.button-width {
width: 200px;
height: 40px;
}
.button-color {
width: 200px;
height: 100px;
}
</style>
<h:form id="clientAdminButtons">
<h:panelGrid id="buttonsPanelGrid" columns="6" style="width: 100%;">
<h:commandButton value="Main" action="main" immediate="true" styleClass="button-width"/>
<h:commandButton value="Calendar" action="weekendcalendar" immediate="true" styleClass="button-width" onclick="this.style.backgroundColor='#F1F1F1'"/>
<h:commandButton value="Budget" action="setbudget" immediate="true" styleClass="button-width"/>
<h:commandButton value="Sales manually" action="custom-import" immediate="true" styleClass="button-width"/>
<h:commandButton value="Butikk sales" action="totalsales" immediate="true" styleClass="button-width"/>
<h:commandButton value="Load image from PPT" action="upload" immediate="true" styleClass="button-width"/>
</h:panelGrid>
</h:form>
<br/><br/><br/>
</ui:insert>
<h:messages id="messages" style="color: red; padding-left: 0px;" />
<ui:insert name="content" />
<ui:insert name="return">
<br/>
<h:form id="returnForm">
<h:commandLink value="Return to main page" action="main" immediate="true"/>
</h:form>
</ui:insert>
</f:view>
</body>
</html>
And not just change - but leave this color until next button will be pressed.
Also I think this button is refreshed after cliking on them, so JS will not work. Am I right?