actionFunction working only when I have certain parameters in the URL

Question

I am having a weird issue when using apex:actionFunction as it only works sometimes (Only when I am passing a parameter in the URL). The visualforce page sometimes will have a parameter in the url, and sometimes it might not have. if it has the parameter it renders the information from an object and when it is click save it update the record, however if it doesnt have this parameter it creates a new record.

the following code only works if there is a valid parameter in the URL, if it doesnt have a parameter it does nothing.

I have on the header the following javascript that calls the actionfunction when the dropdown is change

function callControllerMethod(){        
    var value1 = document.getElementById("{!$Component.form.BillingState}").value;
    callControllerMethod2(value1);
}    

This is what I have in my dropdown:

<apex:actionFunction name="callControllerMethod2" action="{!calendarValue}" reRender="result" >
    <apex:param name="firstParam" assignTo="{!value1}" value="" />
</apex:actionFunction>
<apex:outputPanel id="result" >
   {!calendar}
</apex:outputPanel>
<apex:selectList value="{!BillingState}" id="BillingState" size="1" onchange="callControllerMethod()" >
    <apex:selectoption itemLabel="" itemValue=""></apex:selectoption>
    <apex:selectoption itemLabel="NSW" itemValue="NSW"></apex:selectoption>
    <apex:selectoption itemLabel="WA" itemValue="WA"></apex:selectoption>
    <apex:selectoption itemLabel="QLD" itemValue="QLD"></apex:selectoption>
</apex:selectList>  

I have also add a system.debug in the function that is called "calendarValue" but this debug doesnt display anything (USER_DEBUG) when i test the VF page without a parameter

public void calendarValue (){
    System.debug('in the function');
    calendar = 'c1' + value1;        
}    

Is there anything that I missing when using apex:actionFunction ?

EDIT

I have a method to access the parameters that is called when the page load:

<apex:page docType="html-5.0" action="{!pageInitialParams}"  sidebar="false" showHeader="false" cache="false" controller="FormExxpert" standardStylesheets="false">

this function has as a main objective to check if the id in the URL is Valid if yes, it does a query an assign the result to a group of global variables. that I have declared like:

public String valuexxx{get;set;} 

The save method it just check if one of those global variables is not blank an does an insert or an update.

EDIT 2

I also notice something that make it even more weird: I have in the form a couple of fields that are required="true", if I submit the form having one of this fields empty then if I select the state it works fine.

Answer 1

Using an action function this way definitely works - I've produced a dwindled down version of your code in my dev org.

Controller:

public with sharing class AFTry 
{
    public String afParam {get; set;}
    public String billingState {get; set;}

    public void AF()
    {
        System.debug('### In AF, param = ' + afParam);
    }
}

Page:

<apex:page controller="AFTry">
  <apex:form id="form">
    <apex:actionFunction name="af" action="{!AF}" rerender="selected">
      <apex:param name="value1" assignTo="{!afParam}" value="" />
    </apex:actionFunction>
    <apex:selectList value="{!BillingState}" id="BillingState" size="1" onchange="callControllerMethod()" >
        <apex:selectoption itemLabel="" itemValue=""></apex:selectoption>
        <apex:selectoption itemLabel="NSW" itemValue="NSW"></apex:selectoption>
        <apex:selectoption itemLabel="WA" itemValue="WA"></apex:selectoption>
        <apex:selectoption itemLabel="QLD" itemValue="QLD"></apex:selectoption>
    </apex:selectList>  
    <apex:outputPanel id="selected">
        {!afParam}
    </apex:outputPanel>
  </apex:form>
  <script>
function callControllerMethod(){        
    var value1 = document.getElementById("{!$Component.form.BillingState}").value;
    af(value1);
}    
  </script>
</apex:page>

When I choose any value, including the blank, the system.debug statement executes correctly:

08:47:51:047 USER_DEBUG [8]|DEBUG|### In AF, param = NSW

...

08:48:05:039 USER_DEBUG [8]|DEBUG|### In AF, param =

The lack of the debug output when you choose the blank value implies the action method isn't being executed, which usually means an error has occurred as part of the postback. The best way to tackle this is to add an apex:pageMessages component and add the id of that to the rerender attribute on your actionfunction. I wrote a blog post a while ago on this at:

http://bobbuzzard.blogspot.co.uk/2012/08/the-importance-of-page-messages.html

Answer 2

Add another action function with no param that is expressly used to clear the value on the controller if the param is not present.

You can check for the presence of the param with $CurrentPage.parameters.firstParam in your JavaScript precall function.

Perhaps not that elegant, but it should get the job done until you figure out what is going on.