Question

我正朝着正确的方向努力！

我有一个ColdFusion页面，其中一个表单使用javascript动态填充3个下拉选项（调用.js页面中的函数，该页面依次使用Ajax调用指向存储过程的另一个.cfm页面..然后最终将结果返回到我的原始页面，并填充下一个选择框 - 这使页面不必在选择之间刷新，PHEW！）。

在进行3个上一个下拉选项后，还有2个文本框需要用户填写。基于此用户输入，我需要：

1）调用查询，根据TEXT AND SELECTION输入搜索数据库而不刷新页面（需要保存数据） 2）将结果输出到表格，供用户选择匹配而无需刷新（最好） 3）提交表单并将该值从表中传递到处理请求的下一页

我有一个使用所有CF代码处理此页面的解决方案，但是每次下拉选择后页面必须刷新，以便使用值填充下一个下拉列表。这有效，但相当混乱，看起来不是很整洁。

您对如何使用上述Javascript方法完成此操作有任何建议吗？我正在使用遗留代码，因此我的选择仅限于重新整理整个结构，并且我希望保留尽可能多的现有功能。

下拉列表结构示例和调用页面上的ajax：

在主CFM页面中：

<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>

在.JS页面

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.");
        }
  });
}

主查询必须根据选择填充（忽略＃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>

解决方案后编辑：

我决定通过在我的.JS页面中创建一个新功能来实现CFC方法。当用户完成Street和City输入字段时，将调用该函数。我还要弄清楚的是如何格式化我的函数，以及如何使用该函数/查询（来自cfc）返回一个填充了结果的表（或cfgrid？）。这是我到目前为止在函数中所拥有的内容（到目前为止的查询与上面相同）：

<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");
        }
    });            
}

Answer 1

好的，好像你正在使用jQuery，这使得这很容易。有两种方法可以解决这个问题，您可以在cfm页面上生成它们，然后使用类似jQuery的.load（）函数将它们加载到现有页面中：

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

或者更原生的方法，您可以将查询生成函数移动到CFC中，然后使用<cfajaxproxy>从javascript调用它。以下示例来自于在CF8中实现的时间，但语法应该对CF9有效。一旦你创建了cfc的代理，就可以像使用任何其他javascript对象一样调用它的成员函数。还有一个例子是在livedocs页面的底部填充一个select。

文档：

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

示例：

<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>

如何在不刷新ColdFusion的情况下将表单值传递给填充查询参数

1 个答案: