1

I have been tasked to edit someone's old code and to change the buttons colour to red after it is clicked.

They are using a commandButton which is followed by an actionSupport, I tried to do a style in the actionSupport but it did not change in my preview.. I am certain I am doing this wrong, but since they are already using the onclick I am not sure where I can add the styling change.

Any help would be greatly appreciated and the code is below. (P.S. there are like 30 of the command buttons so if a javascript is needed, I would need to get the id dynamically)

    <apex:pageBlockSectionItem >
<apex:outputpanel id="FurnaceBASE">
            <apex:commandButton value="S-VFBASE" style="background:grey;color:white;width:105px; height:22px;"/>
            <apex:actionSupport event="onclick"
                                style="background:red;"//My little modification 
                                action="{!FurnaceBASE}"
                                rerender="FurnaceBASE"
                                status="FurnaceBASEStatus">
                <apex:param assignTo="{!retVal}" value="FALSE"></apex:param>
            </apex:actionSupport>
        </apex:outputpanel>
        <apex:actionStatus id="FurnaceBASEStatus"
                           startText=""
                           stopText=""/>
</apex:pageBlockSectionItem>
1

Couple things stand out from the code:

1) Using an apex:actionStatus with event onclick defeats the purpose of a commandButton, you should just utilize the action and onclick attributes of the commandButton.

2) In your code you are applying style to the actionSupport tag, that code does not suggest the styling should be applied to the parent button. I'm sorta suprised that compiles since style is not a supported attribute for actionSupport, see vf developers guide for a list of supported attributes.

What you are trying to achieve is definitely possible, use the onclick to apply the style.

<apex:page id="thePage">
    <apex:form>
        <apex:commandButton onclick="this.style.background='red';" rerender="thePage" value="Click Me" />
    </apex:form>
</apex:page>
3
  • the rerender seems to overwrite the onclick, at first it turns to red and then after the page refresh it turns back to original color. Still working on it to see if there is a work-around – jnoel10 Mar 3 '14 at 20:11
  • The rerender piece is critical. If you dont rerender something then yes the page will refresh and the button styling will go back to what salesforces stylesheets define it as. – Phil Rymek Mar 3 '14 at 20:20
  • but then the onclick gets lost no? because that is what is happening to mine – jnoel10 Mar 3 '14 at 20:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.