view側ではなにをするのか？

CakephpでAjax controller編の続きview編です。

コントローラ編では、ajaxのリクエストハンドリングとモデルのバリデーション、そしてajaxリクエストに対するレスポンスのsuccessとerrorという種類があることを書いた。

view編で題材となるコードの全体像は以下のとおり。view編は長くなりそうなので本エントリーでは全体像を俯瞰する感じで、その中でCakephpのjs helperの役割を記述するにとどめたい。

このコードは一つのテキストボックスと、テキストエリア、そして投稿ボタンが配置された普通のフォームを出力する。しかし、ブラウザでソースコードを表示してみると通常のHTMLフォームよりも複雑なコードが多数生成されていることに気付くことができる。

echo $this->Form->create('Post', array('type'=>'post'));
 
echo "<div id='error-set' style='display:none;'></div>";
     
echo $this->Form->label('題名');
echo $this->Form->text('title', array('placeholder' => '投稿の題名を記入してください'));
echo $this->Form->error('Post.title');
     
echo $this->Form->label('投稿の内容');
echo $this->Form->textarea('body', array('placeholder' => '投稿の内容を記入してください'));
echo $this->Form->error('Post.body');
 
$reset_form = <<< EOF
$("form").find("textarea,:text").val("").end();
EOF;
 
$selected = <<< EOF
var opt = document.getElementById('select-category').value;
//console.log(opt);
opt.selected = true;
EOF;
 
$button_disable = <<< EOF
$('div.submit input').attr('disabled', 'disabled');
EOF;
 
$button_enable = <<< EOF
$('div.submit input').removeAttr('disabled');
EOF;
 
$console_log = <<< EOF
console.log("error: " + textStatus);
EOF;
 
$error_set = <<< EOF
$('#error-set').html(XMLHttpRequest.responseText);
EOF;
 
 
$before =  $this->Js->get('#sending')->effect('fadeIn', array('buffer' => false));
$before .= $this->Js->get('#error-set')->effect('fadeOut', array('buffer' => false));
$before .= $this->Js->get('#thanks')->effect('fadeOut', array('buffer' => false));
$before .= $button_disable;
 
$success =  $this->Js->get('#sending')->effect('fadeOut', array('buffer' => false));
$success .= $this->Js->get('#error-set')->effect('fadeOut', array('buffer' => false));
$success .= $button_enable;
$success .= $reset_form;
$success .= $selected;
$success .=  $this->Js->get('#thanks')->effect('fadeIn', array('buffer' => false));
//$success .= $console_log;
     
$error =  $this->Js->get('#sending')->effect('fadeOut', array('buffer' => false));
$error .= $button_enable;
$error .= $error_set;
$error .= $this->Js->get('#error-set')->effect('fadeIn', array('buffer' => false));
 
echo $this->Js->submit('投稿する', array(
    'url' => '/',
    'before' => $before,
    'success' => $success,
    'error' => $error,
    'update' => '#result-ajaxupdate'
));
 
echo "<div id='sending' style='display:none;'>Ajaxリクエスト中</div>";
echo "<div id='thanks' style='display:none;'>AZS!</div>";
echo $this->Form->end();
 
echo "<div id='result-ajaxupdate'></div>";

上のコード内で最も重要な箇所を選択するとしたら58行目の

$this->Js->submit

の部分。このコードはajaxリクエストに対応したフォームボタンを生成するコードで、cakephpのjs helperを利用したコードです。controller編では書きませんでしたが、js helperを利用するには、コントローラ側で

public $helpers = array('Js');

を記述しjs helperを利用可能な状態にしておく必要があります。

「ajaxリクエストに対応したフォームボタンを生成するコード」と書きましたが、実際に出力されるコードは以下のようになります。

//<![CDATA[
$(document).ready(function () {$("#submit-915463158").bind("click", function (event) {$.ajax({beforeSend:function (XMLHttpRequest) {$("#sending").fadeIn();$("#error-set").fadeOut();$("#thanks").fadeOut();$('div.submit input').attr('disabled', 'disabled');}, data:$("#submit-915463158").closest("form").serialize(), dataType:"html", error:function (XMLHttpRequest, textStatus, errorThrown) {$("#sending").fadeOut();$('div.submit input').removeAttr('disabled');$('#error-set').html(XMLHttpRequest.responseText);$("#error-set").fadeIn();}, success:function (data, textStatus) {$("#sending").fadeOut();$("#error-set").fadeOut();$('div.submit input').removeAttr('disabled');$("form").find("textarea,:text").val("").end();var opt = document.getElementById('select-category').value;
//console.log(opt);
opt.selected = true;$("#thanks").fadeIn();$("#result-ajaxupdate").html(data);}, type:"post", url:"\/"});
return false;});});
//]]>

コードを見てみるとjqueryのコードであることに気付く。つまりcakephpのjs helperは純粋なjqueryを出力してくれるのである。感の良い方は気付くかもしれないが、サーバ側のphpコードとフロント側のjsコードをphpコードと同じ場所に記述しているので、サーバ側のデータをフロント側に反映しやすくなっている。また、デバッグ時にはjs関連の知識を必要とするものの、一か所でphpとjsを記述できるため開発効率が上がるというメリットもある。なお、上の生成されたjsコードは個人的には改行等せず生成されたままにしている。

次のエントリーでは、コードの細かい点に触れていこうと考えている。