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

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

ColdFusionでは、フォームの内容をCFMLページなどのアクティブページにいつでも送信できるColdFusion.Ajax.submitForm関数が用意されています。この関数を使用して、入力が完了していないフォームを手動で非同期送信することができます。

コードと動き

「ColdFusion（Ajax機能1）」のサンプルを改造して、並べ替えを行うたびにその状態を保存するようにする事ができます。

※移動したい行のアイコンをドラッグして、希望の位置に配置します。
　並べ替えるたびに自動的にその状態を保存します。

【メインページ】

ColdFusion.Ajax.submitForm関数の呼び出しを追加（updateオプション）
ボタンの有効化を削除
コールバック関数を追加（省略可）
エラーハンドラを追加（省略可）

<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(){
      // 手動で非同期送信をします
      ColdFusion.Ajax.submitForm(
        'sortForm', 'sample_sort_bind.cfm', 
        callback, errorHandler);
    }
  };
  //sortable実行
  $('#sortList').sortable(option);
});

//コールバック関数
function callback(text)
{
  alert("保存しました");
}
//エラーハンドラ
function errorHandler(code, msg)
{
  alert("エラーが発生しました。 " + code + ":" + msg);
}
</script>

【メインページのbind 属性で指定したページ】

フォームの名前を付ける
（メインページのColdFusion.Ajax.submitForm関数に渡すフォーム名と合わせます）
「この並びで保存する」ボタンを削除

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

説明

ColdFusion.Ajax.submitForm関数に渡すパラメータは以下の通りです。

formId	送信するフォームの ID 属性または name 属性です。（必須）
URL	フォームを処理するページの URL です。（必須）
callbackhandler	返される結果を処理するための JavaScript 関数です。(コールバック関数) この関数は 1 つの引数 (レスポンス本文) を取る必要があります。このメソッドは、フォームの送信を非同期で行う場合にのみ使用します。
errorhandler	HTTP エラーレスポンスを処理するための JavaScript 関数です。(エラーハンドラ) この関数は 2 つの引数 (HTTP ステータスコードとエラーメッセージ) を取る必要があります。このメソッドは、フォームの送信を非同期で行う場合にのみ使用します。
httpMethod	送信に使用する HTTP メソッドです。GET か POST のいずれかを指定する必要があります。（デフォルトではPOST）
asynch	フォームを非同期で送信するかどうかを指定するブール値です。デフォルト値は true です。

（Hoshino 2008/07/18）

↑ページトップへ戻る

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