Hide a button on click

Question

<apex:pageblockButtons >
    <apex:commandButton action="{!doToggleEditMode}" value="Edit" reRender="myPanel" rendered="{!NOT(bEditMode)}" id="c1" />
    <apex:commandButton action="{!doSave}" value="Save" reRender="myPanel" rendered="{!bEditMode}" />
    <apex:commandButton value="PRINT" onclick="window.print();"/>
    <apex:commandButton value="Cancel" action="{!Cancel}"/>
    <apex:commandButton value="Save" action="{!save}" id="c2"/>
</apex:pageblockButtons>

Extension

public Boolean bEditMode {
get {
  if(bEditMode == null) {
      bEditmode = false;
      }
      return bEditMode;
  }
  set;
}

public PageReference doToggleEditMode() {
     bEditMode = !bEditMode;
        return null;
}

public PageReference doSave() {
    try {
    controller.save();
    doToggleEditMode();
    }
    catch(Exception ex) {
    }

    return null;
}

I want to hide my save button (id="c2") when some one click one the edit button. i tried using j query, but it does not work.(I have a toggle button. when you click on edit button it will change to save. in that case i have two save buttons. I want to hide one of them. ) Does anybody have any idea? Thanks

Answer 1

You could try using a Visualforce $Component selector to get the actual DOM Id. Something like:

<apex:commandButton action="{!doToggleEditMode}" value="Edit" reRender="myPanel" 
  rendered="{!NOT(bEditMode)}" id="c1"
  onclick="document.getElementById('{!$Component.c2}').style.display='none';return true;" />

See also: Best Practices for Accessing Component IDs