第3のAjax eventタイプのユーザーアクション

changeイベントとAjaxリクエスト

Ajaxアプリの形態に以下のものがある。

・フォームタイプ
・リンクタイプ

フォームのsubmitボタンを押して非同期で処理を行うアプリケーションとリンクをクリックすることで処理を行うタイプの2種類がある。が、このどちらのタイプにも属さないAjaxパターンも存在し、例えば、

・ある場所にマウスを載せるとイベントを開始
・テキストボックスからカーソルを移動するとイベントを開始

など様々なイベントでAjax処理を開始することができる(フォームタイプのAjaxメールフォームのエントリーがあるので参考にしてほしい)。

本エントリーでは、Cakephpのjs helperを利用して実装可能な、

テキストボックスのvalueに変更を加えカーソルを移動した際にイベントを開始

するサンプルを載せてみようと思う。

以下のコードはメールアドレスを入力するためのテキストボックスとAjaxの処理結果を表示するHTML領域を載せたviewコードになる。

echo $this->Form->label('メールアドレス');
echo $this->Form->text('email', array('id' => 'email', 'placeholder' => 'メールアドレスを記入してください'));
echo $this->Form->error('Shop.email');
echo "<div id='shop_form' style='display:none;'></div>";

emailというidが付いた上のテキストボックスに、そのidを元にeventを関連付けてるコードが以下のjs helperコードになる。

$this->Js->get('#email')->event('change', $this->Js->request(
	array('action' => 'shop_info'),
   		array('update' => '#shop_form',
			'before' => $before,
			'success' => $success,
			'error' => $error,
		        'async' => false, 
		        'dataExpression' => true,
		        'method' => 'post',
		        'evalScripts' => true,
		        'data' => $this->Js->serializeForm(array('isForm' => True, 'inline' => True))
    		)
	)
);

cssのidをキーにしてhtml要素と関連付けを行い、changeイベントをマッピングしている。また、イベントの内容として、js helperのrequestメソッドを利用してAjaxリクエスト自体を引数に与えている。第三のAjaxは上で示したコードを元に発展していけると考えている。が、js helperのeventの種類が少ない気がしている。

requestの第一引数では、AjaxのリクエストURLを指定できる。以下のようにControllerやパラメータを明示的に指定することも可能。

array('controller' => 'controller', 'action' => 'action', parameters),   

パラメータにはサーバ側でないと指定できない値もあるので、そういった値を効率的に利用できる点がjs helperを利用する大きな強みだったりする。しかし、完全にjavascriptコードをすべて生成できるというわけではないので、そのあたりがjs helperの弱点というか完全ではない点である。