Call actionFunction from actionSupport onComplete

Question

I'm trying to execute actionFunction inside the onComplete event of actionSupport. The goal is to get the selected Id from a lookup field and pass it to the Controller via the actionFunction, but I can't get it to work. What happens is:

1. actionSupport oncomplete is called
2. actionFunction is called
3. There's no log in the dev console from the Controller. Looks like it's not executed.
4. actionFunction oncomplete is not called.

Here's my code:

VF Page

<apex:page standardController="Contact" extensions="SampleExtensionController" sidebar="false" >

<apex:form id="theForm">

    <apex:actionFunction name="sampleActionFunction" action="{!sampleFuncion}}" rerender="samplePanel, errorDiv" oncomplete="alert('completed')" >
        <apex:param name="accountId" value="" />          
    </apex:actionFunction>

    <apex:outputPanel id="errorDiv" layout="block" styleClass="pageMessagesWrapper">
        //Show errors here
    </apex:outputPanel>

    <apex:outputPanel id="samplePanel">

        <apex:inputField value="{!Contact.AccountId}" >
            <apex:actionSupport event="onchange"  rerender=""  oncomplete="doSomething(this)"/>
        </apex:inputField>

    </apex:outputpanel>

</apex:form>

<script>
function doSomething(field) {    
    var lookupField = document.getElementById(field.id + '_lkid');

    sampleActionFunction(lookupField.value);        
}
</script>

Controller

public class SampleExtensionController  {

    public SampleExtensionController(ApexPages.StandardController ctr) {
    }

    public void sampleFuncion() {
        try {
            System.debug('sampleFuncion is called');
            //do some stuff here
            //query the account, etc        
        }
        catch(Exception ex) {
            ApexPages.addMessage(new Apexpages.Message(ApexPages.Severity.Error, 'some error here'));
        }
    }
}

EDIT: I found the issue - misspelled js variable. 4 lost hours, I can't believe this.

Answer 1

I think your ultimate goal is to pass selected lookup value to the controller and you have taken a complicated route.

Here is the simple way to achieve the functionality leveraging action attribute instead of javascript function at oncomplete.

<apex:page standardController="Contact" extensions="SampleExtensionController" sidebar="false">
    <apex:form id="theForm">
        <apex:outputPanel id="samplePanel">
            <apex:inputField value="{!Contact.AccountId}" >
                <apex:actionSupport event="onchange"  reRender="values"  action="{!sampleFuncion}"/>
            </apex:inputField>      
        </apex:outputpanel> 
        <apex:outputText value="{!fieldValue}" label="You have selected:" id="values" /> 
    </apex:form>
</apex:page>

Controller

public class SampleExtensionController  {
    public String fieldValue {get; set;}
    public SampleExtensionController(ApexPages.StandardController ctr) {
    }

    public void sampleFuncion() {
        try {
            System.debug('sampleFuncion is called');
            fieldValue = Contact.AccountId; //this will assign the selected value to Controller variable.
            //do some stuff here
            //query the account, etc        
        }
        catch(Exception ex) {
            ApexPages.addMessage(new Apexpages.Message(ApexPages.Severity.Error, 'some error here'));
        }
    }
}