function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Heather_HansonHeather_Hanson 

On change event filter not working

I'm not sure what I'm missing so that when the onchange event happens on the picklist values, my searchResults is not updating to show only the records with that value.

Right now, when I select a different product family from the list, nothing happens to the products displayed.

Any help would be apprecidated!!

Here is my visualforce page section:
<apex:selectList value="{!products.Family}" size="1" id="Families">
                    <apex:actionSupport event="onchange" action="{!updateAvailableList}" reRender="searchResults" />
                    <apex:selectOptions value="{!Families}"/>     
                </apex:selectList>

Here is the update available list function:
 
public void updateAvailableList() {
        
        String qString = 'select Id, Pricebook2Id, IsActive, Product2.Name, Product2.Family, Product2.IsActive, Product2.Description, UnitPrice from PricebookEntry where IsActive=true and Pricebook2Id = \'' + theBook.Id + '\'';
             
        if(searchString!=null){
            qString+= ' and (Product2.Name like \'%' + searchString + '%\' or Product2.ProductCode like \'%' + searchString + '%\')';      
        }

This is how I'm getting my product family list:
 
public List<SelectOption> getFamilies()
    {
        List<SelectOption> options = new List<SelectOption>();
        
        Schema.DescribeFieldResult fieldResult =
            Product2.Family.getDescribe();
        List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
        
        for( Schema.PicklistEntry f : ple)
        {
            options.add(new SelectOption(f.getLabel(), f.getValue()));
        }       
        return options;
    }

 
Prabu MahalingamPrabu Mahalingam
Hi, 
This might be an issue on VF Page code but couldn't confirm without seeing your full VF Page code. Please post your full VF Page if the below solution didnt work.

I have encountered this issue in the past and I remember solving it by adding an extra apex:outputPanel with an id which wraps the results table. Then calling this outputpanel Id in rerender.  

Example:
<apex:page controller="sampleCon">
    <apex:form>
        <apex:selectList value="{!countries}" multiselect="true">
            <apex:selectOptions value="{!items}"/>
        </apex:selectList><p/>
 
        <apex:commandButton value="Test" action="{!test}" rerender="out" status="status"/>   
 
    <apex:outputPanel id="out">    <----- Extra Outputpanel that wraps around the results table
        <apex:actionstatus id="status" startText="testing...">
            <apex:facet name="stop">
                <apex:outputPanel>   <--- Results section
                    <p>You have selected:</p>
                    <apex:dataList value="{!countries}" var="c">{!c}</apex:dataList>
                </apex:outputPanel>
            </apex:facet>
        </apex:actionstatus>
    </apex:outputPanel>
     </apex:form>
</apex:page>

 
Heather_HansonHeather_Hanson
Hi Prabu,

Thanks for responding!  I have the outputPanel with ID already.  Here is my full Visualforce:
 
<apex:page standardController="Opportunity" extensions="opportunityProductEntryExt" action="{!priceBookCheck}" sidebar="false" lightningStylesheets="true" >
    
    <apex:sectionHeader Title="Manage {!$ObjectType.Product2.LabelPlural}" subtitle="{!opportunity.Name}"/>
    <apex:messages style="color:red"/>
    
    <style> 
        .search{
        font-size:14pt;
        margin-right: 20px;    
        }
        .fyi{
        color:red;
        font-style:italic;
        }
        .label{ 
        margin-right:10px;
        font-weight:bold;
        }
    </style>
    
    <script type='text/javascript'>
    
    // This script assists the search bar functionality
    // It will execute a search only after the user has stopped typing for more than 1 second
    // To raise the time between when the user stops typing and the search, edit the following variable:
    
    var waitTime = 1;
    
    
    var countDown = waitTime+1;
    var started = false;
    
    function resetTimer(){
        
        countDown=waitTime+1;
        
        if(started==false){
            started=true;
            runCountDown();
        }
    }
    
    function runCountDown(){
        
        countDown--;
        
        if(countDown<=0){
            fetchResults();
            started=false;
        }
        else{
            window.setTimeout(runCountDown,1000);
        }
    }
    
    </script>
    
    
    <apex:form >
        
        <apex:outputPanel id="mainBody">
            
            <apex:outputLabel styleClass="label">PriceBook: </apex:outputLabel>
            <apex:outputText value="{!theBook.Name}"/>&nbsp;
            <!-- apex:commandLink action="{!changePricebook}" value="change" immediate="true"/-->
            <br/>            
        </apex:outputPanel>
        
        <!--SHOPPING CART - Upper Table-->
        
        <apex:pageBlock title="Selected {!$ObjectType.Product2.LabelPlural}" id="selected">           
            <apex:pageblockTable value="{!shoppingCart}" var="s">  
                <apex:column >
                    <apex:commandLink value="Remove" action="{!removeFromShoppingCart}" reRender="selected,searchResults" immediate="true">
                        <!-- this param is how we send an argument to the controller, so it knows which row we clicked 'remove' on -->
                        <apex:param value="{!s.PriceBookEntryId}" assignTo="{!toUnselect}" name="toUnselect"/>
                    </apex:commandLink>
                </apex:column>
                <!--apex:column width="25px"><apex:inputcheckbox value="{!checked}"/></apex:column-->
                <apex:column headerValue="{!$ObjectType.Product2.LabelPlural}" value="{!s.PriceBookEntry.Product2.Name}"/>
                <apex:column headerValue="{!$ObjectType.OpportunityLineItem.Fields.Product_Family__c.Label}" value="{!s.Product_Family__c}"/>                               
                <apex:column headerValue="{!$ObjectType.OpportunityLineItem.Fields.Quantity.Label}">
                    <apex:inputField value="{!s.Quantity}" style="width:70px" required="true" onkeyup="refreshTotals();" />
                    
                </apex:column>                
                <apex:column headerValue="{!$ObjectType.OpportunityLineItem.Fields.UnitPrice.Label}">
                    <apex:inputField value="{!s.UnitPrice}" style="width:70px" required="true" onkeyup="refreshTotals();" />
                </apex:column>                                
            </apex:pageblockTable>
            
            <apex:pageBlockButtons >
                <apex:commandButton action="{!onSave}" value="Save"/>
                <apex:commandButton action="{!onCancel}" value="Cancel" immediate="true"/>
                <!-- apex:commandButton action="{!onadd}" value="Add Selected"/-->
            </apex:pageBlockButtons>
        </apex:pageBlock>
        
        <!--SEARCH BAR-->
        
        <apex:pageBlock >
            
            <apex:outputPanel styleClass="search">
                Search for {!$ObjectType.Product2.LabelPlural} 
            </apex:outputPanel>
            
            <apex:actionRegion renderRegionOnly="false" immediate="true"> 
                <apex:actionFunction name="fetchResults" action="{!updateAvailableList}" reRender="searchResults" status="searchStatus"/>
                <apex:inputText value="{!searchString}" onkeydown="if(event.keyCode==13){this.blur();}else{resetTimer();}" style="width:300px"/>
                <apex:actionFunction name="fetchResults1" action="{!updateAvailableList}" reRender="searchResults" status="searchStatus"/>
                <apex:outputPanel styleClass="search" >Product Family</apex:outputPanel>
                <apex:outputPanel styleClass="search"></apex:outputPanel>
                
                <apex:selectList value="{!products.Family}" size="1" id="Families">
                    <apex:actionSupport event="onchange" action="{!updateAvailableList}" reRender="searchResults" />
                    <apex:selectOptions value="{!Families}"/>     
                </apex:selectList>
                
                <apex:outputPanel styleClass="search"></apex:outputPanel>
                <apex:commandButton action="{!addAllToShoppingCart}" value="Add All Selected" reRender="selected,searchResults" immediate="true"/>
                &nbsp;&nbsp;
                <!-- actionStatus component makes it easy to let the user know when a search is underway -->
                <i>
                    <apex:actionStatus id="searchStatus" startText="searching..." stopText=" "/>
                </i>
            </apex:actionRegion>
            
            <br/>
            
            <!--SEARCH RESULTS-->
            
            <apex:outputPanel id="searchResults">                
                <apex:pageBlockTable value="{!AvailableProducts}" var="a">                   
                    <!--apex:column width="25px"><apex:inputcheckbox value="{!checked}"/></apex:column-->                   
                    <apex:column headerValue="{!$ObjectType.Product2.Fields.Name.Label}" value="{!a.Product2.Name}" />
                    <apex:column headerValue="{!$ObjectType.Product2.Fields.Family.Label}" value="{!a.Product2.Family}"/>
                    <apex:column >
                        <apex:commandButton value="Select" action="{!addToShoppingCart}" reRender="selected,searchResults" immediate="true">
                            <apex:param value="{!a.Id}" assignTo="{!toSelect}" name="toSelect"/>
                        </apex:commandButton>
                    </apex:column>
                </apex:pageBlockTable>
                <apex:outputPanel styleClass="fyi" rendered="{!overLimit}">
                    <br/>
                    Your search returned over 100 results, use a more specific search string if you do not see the desired {!$ObjectType.Product2.Label}.
                    <br/>
                </apex:outputPanel>
            </apex:outputPanel>
            
        </apex:pageBlock>
        
    </apex:form>
    
</apex:page>