CakePHP Ajaxしてみる
投稿者: admin, カテゴリ: CakePHP, tags: Ajax, CakePHP, controller, Element, form, JavaScript, jQuery, prototype.js投稿日: 2010.06.04 - 17:12
更新日: 2010.06.04 - 17:12
すでに動作する 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の環境でのものです
参考文献
- CakePHPで高速Webアプリ開発：第7回 CakePHPで作るToDoアプリ（3）｜gihyo.jp … 技術評論社 :
http://gihyo.jp/dev/serial/01/cakephp/0007 - CakePHPで高速Webアプリ開発：第8回 CakePHPで作るToDoアプリ（4）｜gihyo.jp … 技術評論社 :
http://gihyo.jp/dev/serial/01/cakephp/0008?page=2 - CakePHPでjQueryを使ってAjaxする方法 – IDEA*IDEA ～ 百式管理人のライフハックブログ :
http://www.ideaxidea.com/archives/2009/10/cakephp_and_jquery_ajax.html - AJAX :: 主要なヘルパー :: マニュアル :: 1.2 Collection :: The Cookbook :
http://book.cakephp.org/ja/view/208/AJAX - フォーム要素の自動生成 :: フォーム :: 主要なヘルパー :: マニュアル :: 1.2 Collection :: The Cookbook :
http://book.cakephp.org/ja/view/189/Automagic-Form-Elements - CakePHP Ajax のフォームを作成する | Sun Limited Mt. :
http://www.syuhari.jp/blog/archives/186
関連記事
- CakePHP htmlヘルパー inputメモ
- CakePHP – ACL再入門（４）
- CakePHPでbody onloadを使う
- [CakePHP] テストアプリケーションのブログを構築 – test_apps_posts
- CakePHP – ACL再入門（３）
- CakePHP 1.3 ヘルパー呼び出しの変更
- [CakePHP] 確認画面を出す
スポンサードリンク
エントリ (RSS)