Visualforce - Lookup field that updates picklist, picklist then updates text fields

Question

I'm having trouble figuring out how to properly rerender certain elements on a visualforce page and get them to update / populate other fields accordingly.

I have a lookup field that retrieves an account that can have multiple addresses; one of these addresses is a primary address. I then have a picklist of these addresses that should default to the primary, and finally, I have multiple text fields for the city, state, postal code, etc.

Upon selection of an account, the picklist should be populated with the primary address, as well as the various text fields. The user can then select another alternate address from the picklist, which will again change the various text fields.

Currently I have:

<apex:pageBlockSection columns="2" title="District Details" showHeader="true" collapsible="false"
     id="DistrictDetails">

 // this is the lookup field. after a value is selected, the selectList below should be updated
// *as well* as the text fields at the bottom with the primary address

<apex:inputField id="SchoolDistrict" value="{!Consultant_Request__c.Targeted_District__c}" required="false">
     <apex:actionSupport event="onchange"

           // should rerender/update both the select list AND text fields
           // can only get one of these at a time to work, not both
           rerender="AccountAddressesSelect, DistrictDetails"
           focus="AccountAddressesSelect"
            immediate="false"/>
</apex:inputField>

// this is the select list that contains all the addresses, should always default to primary

<apex:pageBlockSectionItem id="AccountAddressList">      
      <apex:outputLabel value="Account Addresses"></apex:outputLabel>
            <apex:selectList size="1" id="AccountAddressesSelect" value="{!AccountAddress}">                           
                     <apex:selectOptions value="{!AccountAddresses}"/>
                      <apex:actionSupport event="onchange"

                           // action on controller that just sets text fields below
                           action="{!updateAddressFields}"
                           rerender="DistrictDetails"
                           focus="SiteAddress"/>
            </apex:selectList>
 </apex:pageBlockSectionItem>

// these should be populated by primary address after lookup field is selected, and also by any  
// alternate addresses when selectList is selected

<apex:inputField id="SiteCity" value="{!Consultant_Request__c.Site_City__c}" required="true"/>
<apex:inputField id="SiteState" value="{!Consultant_Request__c.Site_State__c}" required="true"/>
<apex:inputField id="Country" value="{!Consultant_Request__c.Country__c}"/>

</apex:pageBlockSection>

I'm forgoing my Apex code because that's not the problem, I'm correctly populating the values of my lookups and selectlists, I just can't get the text fields to populate correctly.

Answer 1

The actionSupport reRenders the whole pageBlockSection. You should be reRendering only the state city and country fields. Wrap them up as follows:

<apex:outputPanel id="pnlAddress">
    <apex:inputField id="SiteCity" value="{!Consultant_Request__c.Site_City__c}" required="true"/>
    <apex:inputField id="SiteState" value="{!Consultant_Request__c.Site_State__c}" required="true"/>
    <apex:inputField id="Country" value="{!Consultant_Request__c.Country__c}"/>
</apex:outputPanel>

Replace the id value of the outputPanel in the rerender attribute of the actionSupport. Also I notice that you have no apex controller property that is bound to the apex:inputField tags. So ideally you should be doing this 1. Create a property Consultant_Request__c conReq {get; set;} which is nothing but an instance of a single Consultant Request record from the database. 2. Write a soql to populate the conReq property withe record values from the Consultant_Request__c object. 3. Modify the input Field code as follows

<apex:inputField id="SiteCity" value="{!conReq.Site_City__c}" required="true"/>
<apex:inputField id="SiteState" value="{!conReq.Site_State__c}" required="true"/>
<apex:inputField id="Country" value="{!conReq.Country__c}"/>

This should have your text values auto populated !! Let me know if this helps.

Answer 2

You can wrap the inputFields in a pageBlockSection to preserve the formatting. Also use the columns attribute of <apex:pageBlockSection> to display the fields in a specific column arrangement. The updated code would be as below.

<apex:pageBlockSection id="pbsAddress" title="Address Information" columns="2">
    <apex:outputPanel id="pnlAddress">
        <apex:inputField id="SiteCity" value="{!conReq.Site_City__c}" required="true"/>
        <apex:inputField id="SiteState" value="{!conReq.Site_State__c}" required="true"/>
        <apex:inputField id="Country" value="{!conReq.Country__c}"/>
    <apex:outputPanel>
</apex:pageBlockSection>

In case you intend to add a label to the inputFields other than the one specified on the corresponding field on the object use the label attribute of the <apex:inputField> tag.