PR

CakePHP Ajaxしてみる

2010.06.04

すでに動作する MVC がある。と言ってもほとんど bake しただけ。これを Ajax する場合のメモ。 contoroller と view を変更する。

◆コントローラーの変更

◇明示的にヘルパーを指定する

var $helpers = array(‘Html’, ‘Form’, ‘Javascript’, ‘Ajax’);

◇修正前（bakeしただけ）：

 function add() {
  if (!empty($this->data)) {
   $this->QuoteChild->create();
   if ($this->QuoteChild->save($this->data)) {
    $this->Session->setFlash(__(‘The QuoteChild has been saved’, true));
    $this->redirect(array(‘action’=>’index’));
   } else {
    $this->Session->setFlash(__(‘The QuoteChild could not be saved. Please, try again.’, true));
   }
  }
  $quotes = $this->QuoteChild->Quote->find(‘list’);
  $this->set(compact(‘quotes’));
 }

◇修正後（参考文献に習って+pagenatorを殺さないように）：

スポンサードリンク

function add() {

  // data exist?
  if (empty($this->data)) return;
 
 // save data
  $this->QuoteChild->create();
  $this->QuoteChild->save($this->data);

 // pagenator
  $this->QuoteChild->recursive = 0;
  $this->set(‘quoteChildren’, $this->paginate());

 // output
  $this->layout=’ajax’;
 }

◆ビューの変更

◇index.ctpの変更とエレメントファイルの作成

add.ctp かなと思ったけれど、参考文献では index.thtml だったので index.ctp を変更してみる。たぶん、先程の変更で function add() の layout で Ajax が指定されたので余計なものを含まぬ出力に変更されたからだろう。まずは必須の１行を加える。

<?php echo $javascript->link(‘prototype’) ?>

そして、入力フォームを書き出す。一部書き換えるけれど、 add.ctp や edit.ctp をコピペな感じ。フォーム出力が「 $ajax->form」 になり、その第３引数は更新される Div 要素を指定する。

<?php
 echo $ajax->form(‘/add’, ‘post’, array(‘update’ => ‘quote_table’));
 echo $form->input(‘quote_id’);
 echo $form->input(‘title’);
 echo $form->input(‘zairyouhi’);
 echo $form->input(‘kakouhi’);
 echo $form->input(‘suuryou’);
 echo $form->end(‘Submit’);
?>

<div id=”quote_table“>
<?php echo $this->renderElement(‘quote_table’) ?>
</div>

これ以降をカットアンドペーストで新しいファイルにする。エレメントにするので設置は /elements/quote_table.ctp になる。

◇add.ctpの書き換え

さきほど作ったエレメントを参照するだけなのでバッサリ切り、以下のみ。

<?php echo $this->renderElement(‘quote_table’) ?>

つまり、各アクションでの結果を返すための共通ファイルなのでエレメントにされているということ。

ここまでで、 index とそこからの add は Ajax 化された。まだ完全ではないから、 pagenator (bakeしただけのもののカットアンドペーストだ)から delete してもページ遷移があるとか問題は残る。とりあえず、たったこれだけの変更で Javascript を記述しないで Ajax を導入することができた。 add したとにリストが更新される様は感動だ。

※本作業は1.2の環境でのものです

参考文献

スポンサーリンク

コメント