How to pass form values to a populate query parameters without refreshing in ColdFusion

I’m looking for a nudge in the right direction!

I have a ColdFusion page with a form which dynamically fills 3 dropdown selections using javascript (calling a function in a .js page, which in turns uses Ajax to call another .cfm page which points to a stored procedure .. and then eventually returns the results back to my original page, and fills the next select box – This keeps the page from having to refresh in between selections, PHEW!).

There are also 2 textboxes which the user is required to fill after making the 3 previous dropdown selections. Based on this user input I need to :

1) Call a query which searches a DB based on the TEXT AND SELECTION input without refreshing the page (need to preserve data) 2) Output the results to a table for the user to select a match without refreshing (preferable) 3) Submit the form and pass that value from the table to the next page which processes the request

I have a solution in place which uses all CF code to handle this page, but the page must refresh after each drop down selection in order to populate the next dropdown with a value. This works but is rather messy and doesn’t look very neat.

Do you have any advice on how I can accomplish this using the Javascript method mentioned above? I’m working with legacy code so my options are limited in reworking the entire structure, and I’d like to keep as much existing functionality as possible.

Example of drop down list structure and ajax on calling page:

In Main CFM Page:

<tr>
    <td>Region :</td>
    <td>
        <select id="subregions" onchange="fillupRegion()">
         <option></option>
          <cfoutput>#regionstr#</cfoutput>
         </select>
      </td>
 </tr>
 <tr>
     <td>Sub Turf :</td>
      <td>
          <select id="region" name="region" onchange="fillupCLLI('','region','clli',true)"></select></td>
 </tr>
 <tr>
     <td>Street Address :</td>
     <td>
         <input type="text" maxlength="50" size="40" name="txtStreet" id="txtStreet"/>
   </td>
 </tr>

In .JS Page

function fillupRegion(){
       // fill up the sub region drop down according to the selected region
       $.ajax({
        type: "POST",      
        dataType: "text",
        url: "lookup_subregions.cfm",      
        data: "region="+ $("#subregions").val(),
        timeout : 30000,
        success: function(response){
            if (response=="<option value=''></option>"){
                $("#region").attr("disabled",true);
            }else{
                $("#region").attr("disabled",false);
            }
            $("#state option[value='']").attr("selected","selected");                      
            $("#region").html(response);                       
        },
        error: function(){
            alert("An error has occurred.");
        }
  });
}

Main Query which must be populated based on selections (ignore the #arguments# tags)

<cfset p=#ARGUMENTS.streetAdd#.split(" ")>
<cfquery name="getPossibleMatchQry"datasource="#request.application.dba#"
          username="#request.application.dbaid#"
          password="#request.application.dbapwd#">
          SELECT top 25 CLLI_CODE, CLLI_CODE_COMBINED_ADDRESS as STREETADDRESS, CITY_PLACE_NAME as CITY, STATE
   FROM CSMI_REF_CLLI_LAT_LONG
    WHERE (UPPER(CLLI_CODE_COMBINED_ADDRESS) LIKE UPPER('#p[1]#' + '%')
    <cfif gStreet EQ True>
     AND UPPER(CLLI_CODE_COMBINED_ADDRESS) LIKE UPPER('% ' + '#p[2]#' +'%'))
     <cfelse> )
    </cfif>

    AND (UPPER(CITY_PLACE_NAME) LIKE UPPER('#ARGUMENTS.city#' + '%') OR UPPER(CITY_PLACE_NAME) LIKE UPPER('%' + '#ARGUMENTS.city#' +'%'))
    AND STATE = '#ARGUMENTS.state#'
   ORDER BY CLLI_CODE开发者_运维知识库_COMBINED_ADDRESS ASC
 </cfquery>

EDIT AFTER SOLUTION:

I've decided to go the CFC approach by creating a new function in my .JS page. The function is called when a user completes the Street and City input fields. What I'm yet to figure out is how to format my function, and how to have that function/query (from the cfc) return a table (or cfgrid?) populated with the results. Here is what I have in my Function so far (the query thus far remains the same as above):

<input type="text" maxlength="50" size="40" name="txtStreet" id="txtStreet" onchange="fillupMatch()"/>

function fillupMatch(){   
    $.ajax({
        type: "POST",      
        dataType: "text",
        url: "lookup_CLDS_match.cfm",      
        data: "streetAdd="+$("#txtStreet").val(),
          "city="+$("#city").val(),
          "region="+$("#region").val()
        timeout : 30000,
        success: function(response){
            $("#matches").html(response);                
        },
        error: function(){
            alert("An error has occurred");
        }
    });            
}

Ok looks like you are using jQuery which makes this pretty easy. There are 2 ways you can approach this, you can generate them on a cfm page then load them into your existing page using something like jQuery's .load() function:

$('#selectDiv').load('components.cfm #selectdiv');

Alternatively a more native approach you can move your query generating functions into a CFC and then call it from javascript using <cfajaxproxy>. The below examples are from when this was implemented in CF8, but the syntax should be valid for CF9. Once you've made the proxy of your cfc you can use it like you would any other javascript object to call its member functions. There is an example of populating a select at the bottom of the livedocs page as well.

Documentation:

http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=Tags_a-b_3.html

Example:

<script type="text/javascript">
//Callback Function to display data.
function createTable(json){
   $(json).find('result').each(function(){
      var data1 = $(this).child('data1').val();
      var data2 = $(this).child('data2').val();
      var html = '<tr><td>'+data1+'</td><td>'+data2+'</td></tr>';
      $('#tbodyID').append(html);
   });
}
</script>
<table>
<thead>
</thead>
<tbody id='tbodyID'>
</tbody>
</table>