We are migrating from some old Cold Fusion to Lucee on a newer server. Having issues with an Ajax selection page that is supposed to give values for a second variable after selecting the first. We created a simple test page to try and figure it out
<!DOCTYPE html>
<html>
<head>
<title>Travel Dates</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src=https://code.jquery.com/jquery-3.6.0.min.js></script>
<script language="javascript">
function getAvailableDates(cr_type) {
// Make an AJAX request to the getAvailableDates function in your ColdFusion file
$.ajax({
type: "POST",
url: "TravelDates.cfc",
data: {
method: "getAvailableDates",
cr_type: cr_type
},
success: function(response) {
if(response && response.dates) {
var dates = response.dates;
var dropdown = $('#selecteddate');
dropdown.empty();
for (var i = 0; i < dates.length; i++) {
var option = $('<option>').val(dates[i]).text(dates[i]);
dropdown.append(option);
}
}
},
error: function() {
console.log("Error: AJAX request failed.");
}
});
}
</script>
</head>
<body>
<CFOUTPUT>
<CFFORM method="post" action="traveldates2.cfm" >
<cfset myTravelDates = createObject('component', 'TravelDates')>
<cfobject component="TravelDates" name="myTravelDates">
<cfajaxproxy cfc="TravelDates" jsclassname="TravelDates">
Select a Destination
<select name="cr_type" size="1" class="input" id="cr_type" onChange="getAvailableDates(this.value)">
<option value="" selected >Select a Destination</option>
<option value="Destination1">Destination1</option>
<option value="Destination2">Destination2</option>
</select>
Select Date
<select name="selecteddate" size="1" class="input" id="selecteddate" style="margin-top:5px " > </select>
<input type="submit" value="CONTINUE" name="submit" ><br>
</cfform> </cfoutput>
</body>
</html>
The .cfc page looks like
<cfcomponent displayname="TravelDates" hint="Getting data on destinations from database">
<cffunction name="getAvailableDates" access="remote" returntype="struct" >
<cfargument name="cr_type" required="yes" type="string">
<cfset var selecteddate = []>
<cfif arguments.cr_type eq "Destination1">
<cfset ArrayAppend(selecteddate, "02/03/2023")>
<cfset ArrayAppend(selecteddate, "03/18/2023")>
<cfelseif arguments.cr_type eq "Destination2">
<cfset ArrayAppend(selecteddate, "02/06/2023")>
<cfset ArrayAppend(selecteddate, "02/13/2023")>
<cfset ArrayAppend(selecteddate, "02/20/2023")>
</cfif>
<cfreturn {dates = selecteddate}>
</cffunction>
</cfcomponent>