+ Start a Discussion
David SDavid S 

Rendering Using AJAX in a Visualforce Page

Hello.  

 

I'm trying to modify to code from force.com cookbook, found here,  to render the page detail or related list, based on the user selection of the drop-down field.   I added the drop-down list, but not sure how to grab the selected value and render the outputPanels.   I'm new to VisualForce developement, any assistance is very much appreaciated.

 

My VF page:

<apex:page controller="contactController" showHeader="true" tabStyle="Contact">
<apex:form >

    <select id="selection">
      <option value="Detail">Detail</option>
      <option value="List">List</option>
    </select>

  
    <apex:dataTable value="{!contacts}" var="c" cellpadding="4" border="1">
      <apex:column >
        <apex:facet name="header"><b>Name</b></apex:facet>
        
        <apex:commandLink reRender="detail">{!c.name}
          <apex:param name="id" value="{!c.id}"/>
        </apex:commandLink>
      </apex:column>
      
      <apex:column >
        <apex:facet name="header"><b>Account Name</b></apex:facet>
        {!c.account.name}
      </apex:column>
    </apex:dataTable>
  </apex:form>
  
  <apex:outputPanel id="detail" >
    <apex:detail subject="{!contact}" title="false" relatedList="false"/>
  </apex:outputPanel>
  
  <apex:outputPanel id="list">
     <apex:relatedList list="ActivityHistories"  subject="{!contact}"/>
  </apex:outputPanel>  
  
</apex:page>

 Controller:

 

public class contactController {

   
   public List<Contact> getContacts() {
      return [SELECT Id, Name, Account.Name, Phone, Email
              FROM Contact
              ORDER BY LastModifiedDate DESC LIMIT 10];
   }

  
   public Contact getContact() {
      Id id = System.currentPageReference().getParameters().get('id');
      return id == null ? new Contact() : [SELECT Id, Name
                                             FROM Contact
                                            WHERE Id = :id];
   }
   
}

 

Best Answer chosen by Admin (Salesforce Developers) 
Chamil MadusankaChamil Madusanka

Here is the modified code. Try this.

 

<apex:page controller="contactController" showHeader="true" tabStyle="Contact">

     <apex:form >

        <apex:selectList id="chooseColor" value="{!string}" size="1" >
            <apex:selectOption itemValue="detail" itemLabel="Detail"/>
            <apex:selectOption itemValue="history" itemLabel="History"/>
            <apex:selectOption itemValue="opentasks" itemLabel="Open Activities"/>
            <apex:actionSupport event="onchange" action="{!test}" reRender="out"/>
        </apex:selectList> 
        
    <!--  <apex:commandButton value="Test" action="{!test}" rerender="out" status="status,detail"/>      -->  
        
     <apex:outputPanel id="out">
        <apex:actionstatus id="status" startText="testing...">
            <apex:facet name="stop">
                <apex:outputPanel >
                    <p>You have selected:</p>
                    {!string}
                </apex:outputPanel>
            </apex:facet>
        </apex:actionstatus>
     </apex:outputPanel>                
                        
    <apex:dataTable value="{!contacts}" var="c" cellpadding="4" border="1">
      <apex:column >
        <apex:facet name="header"><b>Name</b></apex:facet>
        
        <apex:commandLink reRender="detail">{!c.name}
          <apex:param name="id" value="{!c.id}"/>
        </apex:commandLink>
      </apex:column>
      
      <apex:column >
        <apex:facet name="header"><b>Account Name</b></apex:facet>
        {!c.account.name}
      </apex:column>
    </apex:dataTable>

</apex:form>  
  
  <apex:outputPanel id="detail" >
    <apex:detail subject="{!contact}" title="false" relatedList="false" rendered="{!string == 'detail'}" />
    
    <apex:relatedList list="ActivityHistories"  subject="{!contact}" rendered="{!string == 'history'}"/>
    
    <apex:relatedList list="OpenActivities"  subject="{!contact}" rendered="{!string == 'opentasks'}"/>
    
  </apex:outputPanel>
  


</apex:page>

 I added highlighted line. Now it is working onchange.

 

If you got the answer from this post, Please give a Kudos.

 

If a reply to a post answers your question or resolves your problem, please mark it as the solution to the post so that others may benefit.

All Answers

kiranmutturukiranmutturu
make use of < apex:selectList > and <apex:selectoptions> to know the selection and render based on that
David SDavid S

Thanks for the suggestion!  I've modified the code to use the <apex:selectList> and added a command button.  However,  I was wondering if its possible to rerender the detail outputPanel with onchange event of selectList, without using the button..  Here's my code:

 

VF:

<apex:page controller="contactController" showHeader="true" tabStyle="Contact">

     <apex:form >

        <apex:selectList id="chooseColor" value="{!string}" size="1" >
            <apex:selectOption itemValue="detail" itemLabel="Detail"/>
            <apex:selectOption itemValue="history" itemLabel="History"/>
            <apex:selectOption itemValue="opentasks" itemLabel="Open Activities"/>
        </apex:selectList> 
        
      <apex:commandButton value="Test" action="{!test}" rerender="out" status="status,detail"/>        
        
     <apex:outputPanel id="out">
        <apex:actionstatus id="status" startText="testing...">
            <apex:facet name="stop">
                <apex:outputPanel >
                    <p>You have selected:</p>
                    {!string}
                </apex:outputPanel>
            </apex:facet>
        </apex:actionstatus>
     </apex:outputPanel>                
                        
    <apex:dataTable value="{!contacts}" var="c" cellpadding="4" border="1">
      <apex:column >
        <apex:facet name="header"><b>Name</b></apex:facet>
        
        <apex:commandLink reRender="detail">{!c.name}
          <apex:param name="id" value="{!c.id}"/>
        </apex:commandLink>
      </apex:column>
      
      <apex:column >
        <apex:facet name="header"><b>Account Name</b></apex:facet>
        {!c.account.name}
      </apex:column>
    </apex:dataTable>

</apex:form>  
  
  <apex:outputPanel id="detail" >
    <apex:detail subject="{!contact}" title="false" relatedList="false" rendered="{!string == 'detail'}" />
    
    <apex:relatedList list="ActivityHistories"  subject="{!contact}" rendered="{!string == 'history'}"/>
    
    <apex:relatedList list="OpenActivities"  subject="{!contact}" rendered="{!string == 'opentasks'}"/>
    
  </apex:outputPanel>
  


</apex:page>

 

Controller:

public class contactController {

    String s = 'detail';

    public String getString() {
        return s;
    }

    public void setString(String s) {
        this.s = s;
    }

    public PageReference test() {
            return null;
        }
   
   public List<Contact> getContacts() {
      return [SELECT Id, Name, Account.Name, Phone, Email
              FROM Contact
              ORDER BY LastModifiedDate DESC LIMIT 10];
   }

   public Contact getContact() {
      Id id = System.currentPageReference().getParameters().get('id');
      return id == null ? new Contact() : [SELECT Id, Name
                                             FROM Contact
                                            WHERE Id = :id];
   }
}

 

Chamil MadusankaChamil Madusanka

Here is the modified code. Try this.

 

<apex:page controller="contactController" showHeader="true" tabStyle="Contact">

     <apex:form >

        <apex:selectList id="chooseColor" value="{!string}" size="1" >
            <apex:selectOption itemValue="detail" itemLabel="Detail"/>
            <apex:selectOption itemValue="history" itemLabel="History"/>
            <apex:selectOption itemValue="opentasks" itemLabel="Open Activities"/>
            <apex:actionSupport event="onchange" action="{!test}" reRender="out"/>
        </apex:selectList> 
        
    <!--  <apex:commandButton value="Test" action="{!test}" rerender="out" status="status,detail"/>      -->  
        
     <apex:outputPanel id="out">
        <apex:actionstatus id="status" startText="testing...">
            <apex:facet name="stop">
                <apex:outputPanel >
                    <p>You have selected:</p>
                    {!string}
                </apex:outputPanel>
            </apex:facet>
        </apex:actionstatus>
     </apex:outputPanel>                
                        
    <apex:dataTable value="{!contacts}" var="c" cellpadding="4" border="1">
      <apex:column >
        <apex:facet name="header"><b>Name</b></apex:facet>
        
        <apex:commandLink reRender="detail">{!c.name}
          <apex:param name="id" value="{!c.id}"/>
        </apex:commandLink>
      </apex:column>
      
      <apex:column >
        <apex:facet name="header"><b>Account Name</b></apex:facet>
        {!c.account.name}
      </apex:column>
    </apex:dataTable>

</apex:form>  
  
  <apex:outputPanel id="detail" >
    <apex:detail subject="{!contact}" title="false" relatedList="false" rendered="{!string == 'detail'}" />
    
    <apex:relatedList list="ActivityHistories"  subject="{!contact}" rendered="{!string == 'history'}"/>
    
    <apex:relatedList list="OpenActivities"  subject="{!contact}" rendered="{!string == 'opentasks'}"/>
    
  </apex:outputPanel>
  


</apex:page>

 I added highlighted line. Now it is working onchange.

 

If you got the answer from this post, Please give a Kudos.

 

If a reply to a post answers your question or resolves your problem, please mark it as the solution to the post so that others may benefit.

This was selected as the best answer
David SDavid S

Thank you Chamil!  That works!