ColdFusion（Ajax機能1）　｜　有限会社デジタルムーン

現在のページは：Top < ColdFusion < コードサンプル集　Index < ColdFusion（Ajax機能1）

以下のColdFusionのAjax機能を使用すれば、画面全体を更新せずにAjaxフォームを送信することができます。

Ajax コンテナコントロールの中にあるフォームは、自動的に非同期で送信されます。
ColdFusion.Ajax.SubmitForm 関数を使用して、手動で非同期送信を行えます。
Ajax プロキシの setForm 関数を使用して、手動で非同期送信を行えます。

ここでは、Ajax コンテナコントロールによるフォーム送信について紹介します。
ColdFusion.Ajax.SubmitForm 関数については「ColdFusion（Ajax機能2）」を参照してください。

ColdFusionでは、Ajaxコンテナタグ(cfdiv、cflayoutarea、cfpod、cfwindow)に含まれているフォームは自動的に非同期で送信されます。（サンプルでは、cfdiv タグを使用しています。）

コードと動き

「ColdFusion（順序　並び替え）」のサンプルで説明します。

※移動したい行のアイコンをドラッグして、希望の位置に配置します。
　「この並びで保存する」ボタンをクリックし、その状態を維持します。

【メインページ】
cfdiv タグのbind 属性を使用して、フォームの非同期送信を行う領域を作成します。
bind 属性で指定したページに cfform タグが含まれているため、必要なJavaScriptファイルをインポートするcfajaximport タグも必要となります。

<cfajaximport tags="cfform">
<cfdiv bind="url:sample_sort_bind.cfm" id="sortDiv" />

Ajaxページがロードされるときに呼び出すために、JavaScriptに名前を付けて関数にします。

<script type="text/javascript">
function init() {
  //sortableオプション
  var option={ 
    // 並べ替え可能な要素
    items : 'li', 
    // ドラッグ可能な要素
    handle : 'img',
    // 並べ替え終了直後に実行される関数
    stop : function(){
      // 並べ替えた順番を保存します
      var sort_id=[];
      $('li','#sortList').attr('id',function(i){
        sort_id.push(this.id);
      });
      $('#sortId').val(sort_id.toString())
    },
    // 並べ替え終了後に位置が入れ替わっていたら実行される関数
    update : function(){
      // ボタンを有効にします
      $('#submit').removeAttr('disabled'); 
    }
  };
  //sortable実行
  $('#sortList').sortable(option);
});
</script>

フォームと「この並びで保存する」ボタンをクリックされたときの処理を、bind 属性で指定したページに移動します。その他については、「ColdFusion（順序　並び替え）」と同様となります。

【メインページのbind 属性で指定したページ】
メインページのbind 属性で指定したページを作成します。
「ColdFusion（順序　並び替え）」のフォーム（cfform タグ、cfinput タグ使用）と、「この並びで保存する」ボタンをクリックされたときの処理を指定するとともに、 AjaxOnLoad 関数を使用して、Ajaxページがロードされるときにメインページで指定したJavaScriptが実行されるようにします。

<!--- 非同期送信を行うフォーム --->
<center>
<cfform action="" method="post">
  <cfinput type="hidden" id="sortId" name="sortId" />
  <cfinput type="submit" id="submit" name="submit"
      value="この並びで保存する" disabled="disabled" />
</cfform>
</center>
<!--- Ajax ページがロードされた時に
      init関数(jQuery並べ替え)を呼び出す --->
<cfset AjaxOnLoad("init")>

説明

cfdiv タグのパラメータには以下の属性が指定できます。

bind	コンテナの内容を返すバインド式です。この属性を指定した場合、cfdiv タグに本文は指定できません。 ※バインド式では、CFC 関数、JavaScript 関数、URL、 bind パラメータを含む文字列を指定できます。 ※この属性で指定した CFML ページに Ajax機能を使用するタグ (cfform、cfgrid、cfwindow など) が含まれている場合は、そのページで cfdiv タグとともに cfajaximport タグを使用する必要があります。
bindOnLoad	true(デフォルト):最初にタグをロードした時にbind属性式を実行 false:最初のバインドイベント発生までbind属性式を実行しない ※この属性を使用する場合、bind属性も指定する必要があります
ID	生成されるコンテナタグに割り当てる HTML ID 属性値です。
onBindError	バインド式の評価でエラーが発生した場合に実行する JavaScript 関数の名前です。この関数は 2 つの属性 (HTTP ステータスコードとメッセージ) を取る必要があります。この属性を省略すると、デフォルトのエラーポップアップウィンドウが表示されます。
tagName	作成する HTML コンテナタグです。（デフォルト：DIV） ※この属性を使用すると、div以外のHTMLタグを生成できます

cfdiv タグのbind属性にURLを指定すると、その URL で指定したページからフォーム送信により返される内容が cfdiv領域に挿入されます。内容の取得中は、アニメーションのアイコンと「ロード中...」というテキストが表示されます。内容が更新されるのはcfdiv領域のみで、ページのほかの領域は更新されません。

（Hoshino 2008/07/18）

↑ページトップへ戻る

←　ColdFusion コードサンプル集　Indexに戻る