+ Start a Discussion
ErnieErnie 

Actionsupport not working with onchange event

I'm trying to replace one of our many Case record type page layouts with a visualforce page so it can display the necessary fields depending on the exact case issue. The controlling picklist is wrapped in a actionsupport but whenever I have the event as onchange nothing seems to happen. If I change it to onblur I get the actionstatus to display for a split second but it still doesn't render my pageblocksection.

 

Visualforce :

 

<apex:page standardController="Case" extensions="CaseExtension" tabStyle="Case" sidebar="true"> 
<style>
textarea { width:65%; height:90px; }
</style>
    <apex:sectionHeader title="Case Edit" subtitle="New Case"/>
    <apex:form >
    <apex:outputPanel id="outputPanelRender">
        <apex:pageBlock title="Case Edit" id="dynamicBillingPageBlock" mode="edit">
            <apex:pageMessages />
            <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save" />
                <apex:commandButton action="{!cancel}" value="Cancel" />
            </apex:pageBlockButtons>
            <apex:pageblockSection title="Almennar upplýsingar um mál" id="GeneralInfo" columns="2">
                <apex:outputField value="{!case.OwnerId}" title="Case Owner"/>
                <apex:inputField value="{!case.Status}" />
                <apex:inputField value="{!case.ParentId}" />
                <apex:inputField value="{!case.Priority}" />
                <apex:outputField value="{!case.casenumber}" />
                <apex:inputField value="{!case.Origin}" />
                <apex:inputField id="def_account_id" value="{!case.AccountId}"  />
                <apex:pageblockSectionItem >
                    <apex:outputLabel value="Case Record Type" />
                    <apex:outputText value="{!case.RecordType.Name}" />
                </apex:pageblockSectionItem>                
                <apex:inputField id="contactID" value="{!case.ContactId}"  />
                <apex:outputLabel ></apex:outputLabel>
                <apex:inputField value="{!case.plContactCustomer__c}"  />
            </apex:pageblockSection>           
            <apex:actionRegion >     
            <apex:pageblockSection title="Lýsing máls" id="DetailedInfo" columns="1" >
                <apex:inputField style="width:75%;" value="{!case.Subject}"  />                    
                <apex:inputField value="{!case.Description}" />                    
                <apex:inputField value="{!case.pl_BillingSupportCompany__c}"  />
                
                <apex:pageBlockSectionItem >
                
                	<apex:outputLabel value="[Reikningar] Flokkur máls"/>
                	<apex:outputPanel >     
                	   
                		<apex:inputField value="{!case.pBillingCaseCategory__c}">
                   			<apex:actionSupport event="onblur"
                   							action="{!renderIcmsSection}" 	                   							
                   							rerender="icms_section" 
                        					status="categoryChange" />
                   		</apex:inputField>
                  		    
                   	<apex:actionStatus startText="Athuga skilyrði" id="categoryChange"/>
                	</apex:outputPanel>
                
                </apex:pageBlockSectionItem>
                               
                <apex:inputField value="{!case.plBillingCaseNature__c}" />
                <apex:inputField value="{!case.pBillingCaseDetails__c}" />
            </apex:pageblockSection>
            </apex:actionRegion>                          
	           	<apex:pageBlockSection title="Fjarskiptaþjónusta og sjónvarp" id="icms_section" columns="2"	                                     
	                                   rendered="{!renderIcms}" >         
	                   <apex:inputField value="{!case.tServiceToRefund__c}" />         
	                   <apex:inputField value="{!case.tPayingCustomerName__c}" />
	                   <apex:inputField value="{!case.currAmount__c}" />
	                   <apex:inputField value="{!case.txCustomerKennitala__c}" />
	                   <apex:inputField value="{!case.Dagsetning_Lei_r_ttingar__c}" />
	                   <apex:inputField value="{!case.Dagsetning_Lei_r_ttingar_Til__c}" />
	                   <apex:inputField value="{!case.chkBillingDescision__c}" />
	                   <apex:inputField value="{!case.tExternalSystemNumberICMS__c}" />
	           	</apex:pageBlockSection>           	   
        </apex:pageBlock>
        </apex:outputPanel>
   </apex:form>
</apex:page>

 

Apex code :

 

public with sharing class CaseExtension {
	
	private final Case cas;
	
	public Boolean renderIcms {get; set;}
	
	public CaseExtension( ApexPages.StandardController stdController )
	{
		this.cas = (Case)stdController.getRecord();
	}
	
	public PageReference renderIcmsSection(){		
	
	    System.debug( Logginglevel.INFO, 'CATEGORY DEBUG : ' + cas.pBillingCaseCategory__c );
	    
	    if (ApexPages.currentPage().getParameters().get('pBillingCaseCategory__c') == 'Leiðrétting'){
    		System.debug( Logginglevel.INFO, 'Category change');
        	renderIcms = true;
    	}
    	else{
    		renderIcms = false;
    	}
    	
    	return null;
	}
	
	public Boolean getRenderIcms( ) {
		return renderIcms;
	}	

}

 

 

I've tried putting outputpanels around the pageblocksection I want to render when the correct value is selected in the picklist but with no luck. 

 

Best regards,

Orn

 

SteveBowerSteveBower

 

I'm just typing this in by hand based on your code, but I think you want your controller to look more like:

 

 

public with sharing class CaseExtension {
	
	private final Case cas;
	
	public Boolean renderIcms {set;}
	public Boolean getRenderIcms() {
		if (cas.pBillingCaseCategory__c == 'Leiðrétting') return true;
                return false;
	}
	
	public CaseExtension( ApexPages.StandardController stdController )
	{
		cas = (Case)stdController.getRecord();
	}

}

 

 

and then this:

 

                		<apex:inputField value="{!case.pBillingCaseCategory__c}">
                   			<apex:actionSupport event="onblur"
                   							action="{!renderIcmsSection}" 	                   							
                   							rerender="icms_section" 
                        					status="categoryChange" />
                   		</apex:inputField>
Can be:
<apex:inputField value="{!case.pBillingCaseCategory__c}">
    <apex:actionSupport event="onchange" rerender="icms_section" status="categoryChange" />
</apex:inputField>

 

Best, Steve.
ErnieErnie

Thanks for the reply. Your solution is more elegant but after I update my code I'm still running into the same troubles, if I set the event to onblur I get the the pageblocksection to render when the picklist field has the value I'm checking for but when I set it to onchange it does nothing.

 

I tried wrapping the pageBlockSection I'm trying to render in a outputPanel which was recommended in another thread here but it still doesn't work with onchange but does with onblur.

SteveBowerSteveBower

Hi, Hmmm as near as I can see this seems right to me.  Clearly the construct that looks similar to:

 

 

 <apex:column headerValue="Tox Screen Results">
                         <apex:inputField value="{!currentBirth.Toxicity_Screen__c}" >
               <apex:actionSupport event="onchange" reRender="toxic" />
                         </apex:inputField>
                        </apex:column>

 

 <apex:column headerValue="Tox Screen Results">

         <apex:inputField value="{!currentBirth.Toxicity_Screen__c}" >

               <apex:actionSupport event="onchange" reRender="toxic" />

         </apex:inputField>

</apex:column>

 

seems correct. 

 

Sorry, at this point the next thing I'd do is to look at the generated HTML for the inputField element and see what is different what is being generated in the onChange case.  Also look at what you get with onBlur, and perhaps it will shed some light?

 

Best, Steve.

Ashok Kumar NayakAshok Kumar Nayak
Have You found any solution for this, I'm facing the same issue as well.
I need to display a panel if the inputField Value get selected. And My InputField is of picklist type. 
But the onchange event doesn't fire when the picklist values are changing that's why my rendered condition is failing as well.
Plz share if you found any solution or workarround for this.
DixitDixit
@Ashok Kumar Nayak

Have you tried using Apex:inputhidden and then add a "document.getElementById('!$Component.componentid').value = this.value" on your "onchange" event in the select input?, so you can play with the value of your inputhidden. 

I will show you an example that i used in a VF, try to apply it to yours (for me it works perfectly to save the value and pass it to the controller and do a new url) 
<div class="slds-form-element">
                                                <label class="slds-form-element__label" for="select-plancha">
                                                    <abbr class="slds-required" title="required">*</abbr>Plancha:</label>
                                                <div class="slds-form-element__control">
                                                    <div class="slds-select_container">


                                                        <apex:inputhidden value="{!plancha}" id="plaHidd"/>


                                                        <select id="select-plancha" class="slds-select" onChange="document.getElementById('{!$Component.plaHidd}').value = this.value;" >



                                                            <option>No Definido</option>
                                                            <apex:repeat value="{!planchas}" var="pla">
                                                                <option>{!pla.Descripcion__c}</option>
                                                            </apex:repeat>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>