ColdFusionでリフレッシュせずに、フォームの値を入力パラメータに渡す方法

Question

正しい方向に向かってナッジを探しています！

私は、javascriptを使用して3つのドロップダウン選択を動的に満たすフォームを持つColdFusionページを持っています（.jsページ内の関数を呼び出します。これはAjaxを使用してストアドプロシージャを指す別の.cfmページを呼び出します）。最終的に結果を元のページに戻し、次の選択ボックスを塗りつぶします。これにより、ページ間でリフレッシュする必要がなくなります（PHEW！）。

また、3つ前のドロップダウン選択を行った後にユーザーが入力する必要があるテキストボックスが2つあります。このユーザーの入力に基づいて、私は次のことを必要とします： 2）ページを更新せずにテキストと選択入力に基づいてDBを検索するクエリを呼び出す 2）ユーザーがリフレッシュせずにマッチを選択する（好ましい） 3）フォームを送信し、その値をテーブルから次のページに渡す

このページを処理するためにすべてのCFコードを使用するソリューションがあります次のドロップダウンに値を設定するには、各ドロップダウン選択後にページをリフレッシュする必要があります。これは動作しますが、むしろ乱雑で、きれいに見えません。

上記のJavascriptメソッドを使用してこれを達成する方法についてアドバイスをお持ちですか？私はレガシーコードで作業していますので、私のオプションは構造全体を再加工するのには限界があります。できるだけ多くの既存の機能を保ちたいと思います。ページを呼び出すには、リスト構造とAjaxをドロップダウンの

例：メインCFMページで

：基づいて設定する必要があります.JSページで

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

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のアプローチに進むことに決めました。この関数は、ユーザーがストリートとシティの入力フィールドを完了すると呼び出されます。私がまだ理解していないのは、関数をフォーマットする方法と、その関数/クエリ（cfcから）で結果を取り込んだテーブル（cfgrid？）を返す方法です。ここで私は（クエリは、これまで上記と同じまま）これまでのところ、私の機能を持っているものです：あなたはjQueryのを使用しているよう

<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

okが、これはかなり容易になりたそうです。あなたがこれを近づくことができる2つの方法、あなたはjQueryの.LOAD（）関数のようなものを使用して、既存のページにロードし、その後CFMページ上でそれらを生成することができますがあります。

また

$('#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>