The parameter to the function is required but was not passed in - ajax

Question

I am making a filter in order to drill down into a report. I have two fields that are dependent on the selection of another field (which is a multiselect list). When I make my selection(s) from that multiselect field, it looks like the parameter is being passed in as an array and ultimately not being recognized. It looks as if my parameter is being passed in as an array, which I'm thinking is the issue
Javascript Code:
function getMO()
{
var fa_code = $('#tslcFilterFA').val();
var ao_code = $('#tslcFilterAO').val();
var wq_code = $('#tslcFilterWQ').val();
var newOption = '';
$('#tslcFilterMO').empty();
$('#tslcFilterMO').append(newOption);
$('#TSLC_MO_Loading').css('display','inline');
$.ajax({
url: '../TSLC/getData.cfc',
type:"POST",
cache: false,
dataType: "text",
async:true,
data: {method: "getMO",
fa_code: fa_code,
ao_code: ao_code,
wq_code: wq_code
},
success: function(returnMsg)
{
try
{
var obj = JSON.parse(returnMsg);
$.each(obj.DATA, function(index,row) {
if (obj.DATA.length == 1)
{
var newOption = '<option selected="selected" value="' + row[0] + '">' + row[1] + '</option>';
}
else
{
if (row[2] == "1")
{
var newOption = '<option selected="selected" value="' + row[0] + '">' + row[1] + '</option>';
}
else
{
var newOption = '<option value="' + row[0] + '">' + row[1] + '</option>';
}
}
$('#tslcFilterMO').append(newOption);
});
try
{
$('#tslcFilterMO').multiselect('destroy');
}
catch(e) {}
$('#tslcFilterMO').multiselect({
selectedList: 4
}).multiselectfilter();
$('.ui-multiselect').css('width','225px');
$('#TSLC_MO_Loading').css('display','none');
}
catch(e)
{
alert('getMO Error parsing JSON');
}
},
error: function(httpRequest, textStatus, errorThrown)
{
alert("getMO status=" + textStatus + ",error=" + errorThrown);
}
});
}
I've tried to change this line:
var ao_code = $('#tslcFilterAO').val();
to this:
var ao_code = $('#tslcFilterAO').multiselect('getChecked').map(function () {return this.value;}).get();
I've also tried to wrap my ao_code variable in URLDecode() to see if it would pass the value as a string instead of an array, but neither works.
CF Code (from component):
<cffunction name="getMO" access="remote" returntype="any" returnformat="plain" hint="Get distinct Managing Orgs based on FA=ATT_IT and AO">
<cfargument name="fa_code" type="string" required="true">
<cfargument name="ao_code" required="true">
<cfargument name="wq_code" required="true">
<cfquery name="qMO" datasource="#request.dbdsn_ic4p#" username="#request.dbuser_m66266#" password="#request.dbpw_m66266#">
SELECT DISTINCT managing_org MANAGING_ORG, DECODE(managing_org,'*','*ALL*',managing_org) MANAGING_ORG_DISPLAY, DECODE(managing_org,'*',1,2) sortcol
<cfif #fa_code# NEQ "ATT_IT">
FROM HAS_TICKET_STATE_GUI_LOOKUP
WHERE client_id = '#fa_code#'
<cfelse>
FROM IT_TICKET_STATE_GUI_LOOKUP
WHERE 1=1
</cfif>
<cfif #ao_code# neq "">
AND active_org IN (<cfqueryparam value="#ao_code#" cfsqltype="cf_sql_varchar" list="true" />)
</cfif>
<cfif #wq_code# neq "">
<!--- !COM: is workaround for commas in listbox items! --->
AND work_queue IN (#replace(ListQualify(wq_code,"'",",","CHAR"),":COM!",",","all")#)
</cfif>
ORDER BY 3, 1
</cfquery>
<cfreturn serializeJson(qMO)>
</cffunction>

Answer 1

Change this line in your JS code
var ao_code = $('#tslcFilterAO').val();
to
var ao_code = $('#tslcFilterAO').val().join(",");
That should give you a list of string values from the multiple select field that you're expecting in your function in the CFC.
The join() method joins all elements of an array into a string. More on "join" here.

Answer 2

This article helped me solve my problem... https://christierney.com/2011/06/07/returning-multiple-value-elements-to-coldfusion-remote-method-via-jquery-ajax/
function getWQ()
{
var fa_code = $('#tslcFilterFA').val();
var ao_code = $('#tslcFilterAO').val();
if ($.isArray(ao_code))
var ao_code_array = ao_code.join(",");
else
var ao_code_array = ao_code;
var mo_code = $('#tslcFilterMO').val();
if ($.isArray(mo_code))
var mo_code_array = mo_code.join(",");
else
var mo_code_array = mo_code;
var newOption = '';
$('#tslcFilterWQ').empty();
$('#tslcFilterWQ').append(newOption);
$('#TSLC_WQ_Loading').css('display','inline');
$.ajax({
url: '../TSLC/cfcs/getData.cfc',
type:"POST",
cache: false,
dataType: "text",
async:true,
data: {method: "getWQ",
fa_code: fa_code,
mo_code: mo_code_array,
ao_code: ao_code_array
},
success: function(returnMsg)
{

Answer 3

Have you considered a combination of the jQuery serializeArray() function and the param() function? It creates a string similar to a query string which is easily parsed. You could send the whole form in.
Example: $.param($('#yourform').serializeArray(),false);
Or, perhaps, simply use the serializeArray function to send your function a JSON string?