1

私は正しい方向へのナッジを探しています！

javascriptを使用して3つのドロップダウン選択を動的に入力するフォームを持つColdFusionページがあります（.jsページで関数を呼び出し、次にAjaxを使用してストアドプロシージャを指す別の.cfmページを呼び出します..そして最終的に結果は元のページに戻り、次の選択ボックスに入力されます–これにより、選択の合間にページを更新する必要がなくなります、PHEW！）。

前の3つのドロップダウン選択を行った後にユーザーが入力する必要がある2つのテキストボックスもあります。このユーザー入力に基づいて、次のことを行う必要があります。

1）ページを更新せずにTEXT AND SELECTION入力に基づいてDBを検索するクエリを呼び出します（データを保持する必要があります）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？）を返す方法です。これまでの関数にあるものは次のとおりです（これまでのクエリは上記と同じです）。

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

関数fillupMatch（）{   
    $ .ajax（{
        タイプ：「POST」、      
        dataType： "text"、
        url： "lookup_CLDS_match.cfm"、      
        データ： "streetAdd =" + $（ "＃txtStreet"）。val（）、
          "city =" + $（ "＃city"）。val（）、
          "region =" + $（ "＃region"）。val（）
        タイムアウト：30000、
        成功：function（response）{
            $（ "＃matches"）。html（response）;                
        }、
        エラー：function（）{
            alert（ "エラーが発生しました"）;
        }
    }）;            
}
4

1 に答える 1

0

これを非常に簡単にするjQueryを使用しているようです。これにアプローチする方法は2つあります。cfmページで生成してから、jQueryの.load（）関数などを使用して既存のページにロードします。

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

あるいは、よりネイティブなアプローチでは、クエリ生成関数をCFCに移動し、を使用してjavascriptから呼び出すことができます<cfajaxproxy>。以下の例は、これが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>
于 2011-01-27T20:12:51.987 に答える