Migration and ajax issues

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>

Hi @disalex, what errors are you having with that code?

We can pick the selection from the first box but the second box is not populating at all.

This is not an error, just a description of the symptom. Could be a lot of things. We can hardly tell what is happenning just by seeing the description of a symptom.

What is the Chrome Dev Tool saying? Open and click the Chrome Devs “Network” tab, then refreh the cfm page, use the forms select box and look what is happening in the Chrome Devs network tab. Watch out for console errors and what the ajax call is sending back by selecting the ajax call in the network tap and clicking “response”.

I know the CF-Ajax stuff via cfform etc is not officially/fully supported in Lucee. It’s deprecated See https://docs.lucee.org/categories/ajax.html. The CFML Community strongly discourages to use that cfml tags for a long time now. Some functionality might work through the cfajax extension in Lucee, but I really suggest rewriting that and use html and a JavaScript library, such as jquery, to make it work.

As a reference, see the ajax example of a similar solution to a related problem I’ve posted to stackoverflow user a while back:

Please look all answers on that post.

1 Like

there are a few fixes for the ajax extension in the latest version 1.0.0.5, but everything @andreas said and suggested great advice

which version are you using?

1 Like