+ Start a Discussion
nlsnydernlsnyder 

Need help getting a apex:commandButton to show a pageBlock and another button to hide it

I have a apex page that contains two forms (each contains a pageBlock).  The top form contains a table of quote line items with 4 command buttons.  I am trying to get the 4th button "Edit Selected Lines" to show the bottom form's pageBlock but I cannot get it to work.

I want the "Edit Selected Lines" button to SHOW the bottom pageBlock "editForm" when clicked.  Then when you click "Save" or "Cancel" on the bottom form, the bottom pageBlock "editBlock" is hidden.  WHAT am I doing wrong??  I have googled and seen examples that do similar things but my does not work?  I originally had one form with two pageBlocks but that didn't work either.  

TO ME:  The "Edit Selected Lines"
   <apex:commandButton action="{!enableEditMode}" value="Edit Selected Lines" rerender="editBlock"/>
shoud call my controller and set editMode to true (and it does), then afterwards it should rerended the edit block.  The editBlock should show up because the rendered flag is set to "{!editMode}" which is now true.  WHY does it not show up?

I have the following Controller which contains editMode:
----------------------------------------------------------------
public class QuoteLineItems_ControllerExtension {
    
    private final Quote quote;   
    private list<QuoteLineItem> quoteLineItems;
    private final ApexPages.StandardController stdController;
    private QuoteLineItem editLineItem;
    private boolean editMode;
    
    public QuoteLineItems_ControllerExtension (ApexPages.StandardController stdController) {
        this.quote = (Quote)stdController.getRecord();    
        this.quoteLineItems = this.quote.QuoteLineItems;     
        this.stdController = stdController;
        this.editLineItem = new QuoteLineItem();
        this.editMode = false;
    }
    
    public Quote getQuote() {
        return quote;
    }
    public boolean getEditMode() {
        return editMode;
    }
    public void setEditMode(boolean editMode) {
        this.editMode = editMode;
    }
    public QuoteLineItem getEditLineItem() {
        return editLineItem;
    }
    public void setEditLineItem(QuoteLineItem editLineItem) {
        this.editLineItem = editLineItem;
    }
    public void enableEditMode() {
        editMode = true;
    }
    public void disableEditMode() {
        editMode = false;
    }
    public list<QuoteLineItem> getQuoteLineItems() {
        return quoteLineItems;
    }
    public void setQuoteLineItems(list<QuoteLineItem> quoteLineItems) {
        this.quoteLineItems = quoteLineItems;
    }
.....
}

I have the following apex page.   I originally had one form with two page blocks, then switched to two forms but neither worked?
--------------------------------------------------------------------------------------------------------------------------------
<apex:page standardController="Quote" extensions="QuoteLineItems_ControllerExtension" sidebar="false">

  <apex:variable var="editLineItem" value="{!editLineItem}"/>
  <apex:variable var="editMode"     value="{!editMode}"/>
 
  <apex:messages id="messages"/>
   
  <apex:form id="EditAllQuoteLine_Form">
    <style>
       .ct { text-align: center; }
    </style>
 
    <apex:actionFunction name="showEditBlock" action="{!enableEditMode}"  rerender="editBlock"/>
    <apex:actionFunction name="hideEditBlock" action="{!disableEditMode}" rerender="editBlock"/>
 
    <script language="JavaScript" type="text/javascript">
....         
     function editSelectedLines() {
         //alert('In editSelectedLines');         
         showEditBlock();  
     }  
     function saveEdit() {
         //alert('In saveEdit');
     }
     function cancelEdit() {
         hideEditBlock;
     }
    </script>
 
    <apex:pageBlock title="Edit Quote Line Items for {!Quote.Name}" mode="edit">
        <apex:actionFunction name="updateData" action="{!updateLineData}" rerender="LineItemTable,messages" oncomplete="init();">
            <apex:param name="param1" value=""/>
        </apex:actionFunction>
         
        <apex:pageBlockButtons >
            <apex:commandButton action="{!saveQuoteLineItems}"   value="Save All Line Items"/>
            <apex:commandButton action="{!updateQuoteLineItems}" oncomplete="init()" value="Update All Line Items" rerender="LineItemTable,messages"/>
            <apex:commandButton action="{!cancel}" value="Cancel"/>
            <apex:commandButton action="{!enableEditMode}" value="Edit Selected Lines" rerender="editBlock"/>
        </apex:pageBlockButtons>
        
        <apex:dataTable id="LineItemTable" value="{!Quote.QuoteLineItems}" var="lines" rowClasses="odd,even"
                        styleClass="tableClass" cellpadding="4"  border="1" headerClass="ct">            
                       
            <apex:column headerValue="Edit">
                <apex:inputField id="multiEdit_field" value="{!lines.MultiEdit__c}"/>
            </apex:column>                    
            <apex:column headerValue=" Quantity ">
                 <apex:inputField id="qty_field" value="{!lines.Quantity}" style="width: 50px;" onchange="var lpos=getLinePos(this.id); updateData(lpos);">
                 </apex:inputField>
            </apex:column>
            <apex:column headerValue="Product">
                 <apex:inputField id="product_field" value="{!lines.ProductName__c}" style="width: 150px;"/>
            </apex:column>            
            <apex:column headerValue="List Price">
                 <apex:inputField id="listPrice_field" value="{!lines.ListPrice}"/>
            </apex:column>     
            <apex:column headerValue="Sales Price" style="width: 70px;">
                 <apex:inputField id="salesPrice_field" value="{!lines.UnitPrice}" style="width: 50px;"/>
            </apex:column>  
            <apex:column headerValue="Renew?">
                 <apex:inputCheckbox id="renew_field" value="{!lines.Renew__c}" onclick="var lpos=getLinePos(this.id); updateData(lpos);"/>
            </apex:column>
            <apex:column headerValue="Prorate?">
                 <apex:inputCheckbox id="prorate_field" value="{!lines.Prorate__c}" onclick="var lpos=getLinePos(this.id); updateData(lpos);" />
            </apex:column>
            <apex:column headerValue="Years?">
                 <apex:inputField id="years_field" value="{!lines.Years__c}" onchange="var lpos=getLinePos(this.id); updateData(lpos);" rendered="{!lines.Prorate__c == false}"/>
            </apex:column>
            <apex:column headerValue="Begin Date">
                <apex:inputField id="begDt_field" value="{!lines.BeginDate__c}"  onchange="var lpos=getLinePos(this.id); updateData(lpos);"/>
            </apex:column>
            <apex:column headerValue="End Date">
                <apex:inputField id="endDt_field" value="{!lines.EndDate__c}" onchange="endDateChanged(this);"/>             
            </apex:column>
            <apex:column headerValue="Period">
                 <apex:outputField id="period_field" value="{!lines.Period__c}" style="width: 75px;" rendered="{!lines.Period__c > 0}"/>
            </apex:column>
            <apex:column headerValue="MonthlyPrice">
                <apex:outputField id="monthlyPrice_field" value="{!lines.Monthly_Price__c}" rendered="{!lines.Prorate__c}"/>
            </apex:column>    
            <apex:column headerValue="Subtotal">
                <apex:outputField id="subtotal_field" value="{!lines.updatedSubtotal__c} "/>
            </apex:column>                                                                                     
        </apex:dataTable>      
    </apex:pageBlock>
  </apex:form>   
 
  <apex:form id="EditSelectedLines_Form">
    <apex:pageBlock title="Edit Common Fields for Selected Lines" id="editBlock" rendered="{!editMode}">
        <apex:dataTable id="editTable" value="{!EditLineItem}" var="editLine"
                        styleClass="tableClass" cellpadding="4"  border="1" headerClass="ct">
            <apex:column headerValue="Renew?">
                 <apex:inputCheckbox id="renew_edit" value="{!editLine.Renew__c}"/>
            </apex:column>
            <apex:column headerValue="Prorate?">
                 <apex:inputCheckbox id="prorate_edit" value="{!editLine.Prorate__c}"/>
            </apex:column>
            <apex:column headerValue="Years?">
                 <apex:inputField id="years_edit" value="{!editLine.Years__c}"/>
            </apex:column>
            <apex:column headerValue="Begin Date">
                <apex:inputField id="begDt_edit" value="{!editLine.BeginDate__c}"/>
            </apex:column>
            <apex:column headerValue="End Date">
                <apex:inputField id="endDt_eidt" value="{!editLine.EndDate__c}"/>             
            </apex:column>                 
        </apex:dataTable>
        
        <table width='500'><tr><td align='center'>
            <apex:commandButton action="{!disableEditMode}" value="Save"   rerender="editBlock"/>
            <apex:commandButton action="{!disableEditMode}" value="Cancel" rerender="editBlock"/>
        </td></tr></table>    
     </apex:pageBlock>   
  </apex:form>
 
</apex:page>

Starz26Starz26

I believe you have to rerender a parent element....

 

try wrapping the pageblock in an output panel and put the edit mode there. Then rerender the output panel