[SalesForce] Actionfunction is not working on onchange event

I am trying to call actionFuction on selectlist onchange event but It is not working (function not going to called)

Can anybody tell me what wrong in my code and the best practices follow when using Ajax component

Below is the code for your reference:

Apex Page:

<apex:page controller="BucketImageController" action="{!constructors}">
    <apex:form >
        <apex:PageBlock >
            <apex:selectList value="{!BucketList}" size="1" onChange="ShowAllImages();" >
                <apex:selectOptions value="{!Buckets}"/>
            </apex:selectList>
            <apex:actionFunction name="ShowAllImages" action="{!DisplayAllImages}" />   
            <apex:outputPanel id="out"> 
                <apex:outputText value="{!BucketList}"/>
            </apex:outputPanel>
        </apex:PageBlock>
    </apex:form>
</apex:page>

Controller:

 public String[] getBucketList() {
    return BucketList;
}

public void setBucketList(String[] BucketList) {
    this.BucketList = BucketList;
}

/* ----------- End Properties Declaration Block ------------------*/    

/* ----------- Methods Declaration Block -------------------------*/
public PageReference constructors(){
    try{

        credentials = new AWSKeys(AWSCredentialName);
        as3 = new S3.AmazonS3(credentials.key,credentials.secret);

        }catch(AWSKeys.AWSKeysException AWSEx){
         System.debug('Caught exception in AWS_S3_ExampleController: ' + AWSEx);
         ApexPages.Message errorMsg = new ApexPages.Message(ApexPages.Severity.FATAL, AWSEx.getMessage());
         ApexPages.addMessage(errorMsg);

    }   

   return null; 
}   



public List<SelectOption> getBuckets() {


    List<SelectOption> options = new List<SelectOption>();

    Datetime now = Datetime.now();
    S3.ListAllMyBucketsResult allBuckets = as3.ListAllMyBuckets(as3.key,now,as3.signature('ListAllMyBuckets',now));

    S3.ListAllMyBucketsList BucketList=allBuckets.Buckets;
    S3.ListAllMyBucketsEntry[] buckets=BucketList.Bucket;

    bucketname=new string[]{};

    for(S3.ListAllMyBucketsEntry bkt :buckets)
        bucketname.add(bkt.name);

    for(string bktName:bucketname )
    {
        options.add(new SelectOption(bktName,bktName));
    }

    return options;

    }   


public void DisplayAllImages()
{
        system.debug('#######' + BucketList);

}

Best Answer

actionFunction is not working because you are not using "rerender" attribute in actionFunction. There is a bug in VF pages related to actionFuntion that it will work only if you use rerender attribute. So, you have to add rerendere="none" or any element id that you want to rerender , but i think if you use rerender="none" it will work for you.

<apex:actionFunction name="ShowAllImages" action="{!DisplayAllImages}" rerender="none"/>.

Hope this will help you!!!