1

我正在寻找正确方向的推动力！

我有一个带有表单的 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# 标签）

<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？）。到目前为止，这是我在 Function 中的内容（到目前为止的查询与上面的相同）：

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

函数填充匹配（）{   
    $.ajax({
        类型：“发布”，      
        数据类型：“文本”，
        url: "lookup_CLDS_match.cfm",      
        数据：“streetAdd="+$("#txtStreet").val(),
          "city="+$("#city").val(),
          "region="+$("#region").val()
        超时：30000，
        成功：函数（响应）{
            $("#matches").html(响应);                
        },
        错误：函数（）{
            alert("发生错误");
        }
    });            
}
4

1 回答 1

0

好的，看起来您正在使用 jQuery，这很容易。有两种方法可以解决这个问题，您可以在 cfm 页面上生成它们，然后使用 jQuery 的 .load() 函数将它们加载到现有页面中：

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

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

文档：

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>
于 2011-01-27T20:12:51.987 回答