Unnamed Apex:Param tag causes generated javascript function to have a syntax error

Question

I'm writing a page to get the value an apex:selectList is changed too, using the onchange attribute, and an actionFunction. Everything looks right, and compiles, but when I load the the page, the generated javascript for the function is missing quotes around (what looks like) a html input Id, and fails to create the actionFunction.

Specifically, this is the generated javascript function:

<script id="j_id0:j_id1:j_id2" type="text/javascript">
    RerenderOutputPanel=function(j_id0:j_id1:j_id3){A4J.AJAX.Submit('j_id0:j_id1',null,{'similarityGroupingId':'j_id0:j_id1:j_id2','parameters':{'j_id0:j_id1:j_id3':(typeof j_id0:j_id1:j_id3!='undefined'&&j_id0:j_id1:j_id3!=null)?j_id0:j_id1:j_id3:'','j_id0:j_id1:j_id2':'j_id0:j_id1:j_id2'} } )};
</script>

This causes the error:

Uncaught SyntaxError: Unexpected token :

When I remove my apex:param tag under my apex:actionFunction, the error goes away, and the generated code looks like this:

<script id="j_id0:j_id1:j_id2" type="text/javascript">
    RerenderOutputPanel=function(){A4J.AJAX.Submit('j_id0:j_id1',null,{'similarityGroupingId':'j_id0:j_id1:j_id2','parameters':{'j_id0:j_id1:j_id2':'j_id0:j_id1:j_id2'} } )};
 </script>

I'm unsure where the value j_id0:j_id1:j_id3 is coming from- I can't find it anywhere else in the generated html, except for this function definition.

What could I change about my markup to prevent this error from occurring?

Ideally I'm looking to not have to go to Salesforce support, as I do not have access to developer/premium support, but if this is a Salesforce issue, I have very few other options.

---

This is the code I've been using as a test case:

Visualforce

<apex:page controller="TestClass">

    <apex:form>

        <apex:actionFunction reRender="OutputPanel" name="RerenderOutputPanel" action="{!Rerender}">
            <apex:param assignTo="{!SelectedValue}" value="" /> <!-- removing this value removes the syntax error -->
        </apex:actionFunction>

        <apex:selectList size="1" onchange="RerenderOutputPanel(this.value)" value="{!SelectedValue}">
            <apex:selectOptions value="{!Options}"></apex:selectOptions>
        </apex:selectList>

        <apex:outputPanel id="OutputPanel">
            Value: <apex:outputLabel>{!SelectedValue}</apex:outputLabel>
        </apex:outputPanel>

    </apex:form>

</apex:page>

Apex

public class TestClass {

    public TestClass() {}

    public List<SelectOption> Options {
        get {
            return new List<SelectOption>{
                new SelectOption('FirstId', 'FirstValue'),
                new SelectOption('SecondId', 'SecondValue'),
                new SelectOption('ThirdId', 'ThirdValue')
            };
        }
        set;
    }

    public String SelectedValue { get; set; }

    public PageReference Rerender() {
        return null; 
    }

}

Answer 1

Stand down! I've figure this one out. It looks like the j_id0:j_id1:j_id3 text is referencing the variable name, and when a name is not provided to the apex:param tag, the value passed to the javascript function is some auto-generated text, in this case, j_id0:j_id1:j_id3.

By adding a name to the apex:param tag, the parser uses that value instead of the automatic one, preventing the syntax error.

---

Interesting that this error isn't reported in a more understandable method (which is why I'm leaving this question open instead of deleting it in shame). Seems like an easy way to rectify this would be to require the name, or at least report an error if the apex:param tag is used without a name, as the child of an apex:actionFunction tag. What also strikes me as odd is how this generates a syntax error as a name, instead of a name which is valid in javascript.

---

Below is the updated, working test class & page.

Visualforce

<apex:page controller="TestClass">

    <apex:form>

        <apex:actionFunction reRender="OutputPanel" name="RerenderOutputPanel" action="{!Rerender}">
            <apex:param name="TestParam" assignTo="{!SelectedValue}" value="" />
        </apex:actionFunction>

        <apex:selectList size="1" onchange="RerenderOutputPanel(this.value)" value="{!SelectedValue}">
            <apex:selectOptions value="{!Options}"></apex:selectOptions>
        </apex:selectList>

        <apex:outputPanel id="OutputPanel">
            Value: <apex:outputLabel>{!SelectedValue}</apex:outputLabel>
        </apex:outputPanel>

    </apex:form>

</apex:page>  

Apex

public class TestClass {

    public TestClass() {}

    public List<SelectOption> Options {
        get {
            return new List<SelectOption>{
                new SelectOption('FirstId', 'FirstValue'),
                new SelectOption('SecondId', 'SecondValue'),
                new SelectOption('ThirdId', 'ThirdValue')
            };
        }
        set;
    }

    public String SelectedValue { get; set; }

    public PageReference Rerender() {
        return null; 
    }

}

Naming the param causes this javascript to render:

<script id="j_id0:j_id1:j_id2" type="text/javascript">
    RerenderOutputPanel=function(TestParam){A4J.AJAX.Submit('j_id0:j_id1',null,{'similarityGroupingId':'j_id0:j_id1:j_id2','parameters':{'TestParam':(typeof TestParam!='undefined'&&TestParam!=null)?TestParam:'','j_id0:j_id1:j_id2':'j_id0:j_id1:j_id2'} } )};
</script>