Jsヘルパーを使用してAjax更新

更新処理でページ遷移を伴う場合、ページ全体をレスポンスするのに対して、Ajax処理ではページの一部のレスポンスが可能となるためサーバからの通信量を抑えることが可能となります。デモ
head
<?php // jQuery echo $this->Html->script( 'jquery.min.js', array( 'inline' => 'false')); // Jsヘルパーが生成するJSを出力させる echo $this->Js->writeBuffer( array( 'inline' => 'true')); ?>
ビュー (Views)
// App/Views/Ajaxs/js_submit_form.ctp <?php echo $this->Form->create( 'Testtable', array( 'type'=>'post')); echo $this->Form->text( 'data'); echo $this->Js->submit( 'Update', array( 'before' => $this->Js->get( '#sending-js-submit')->effect( 'fadeIn'), // => beforeSend (Local Event) 'success' => $this->Js->get( '#sending-js-submit')->effect( 'fadeOut'), // => success (Local Event) // 'error' => // => error (Local Event) // 'complete' => // => complete (Local Event) 'url' => '/js_submit', // Ajax処理で呼び出すURL(controller/action) 'update' => '#result-js-submit', // ajax更新の結果を出力する要素 )); echo $this->Form->end(); ?> <div id="sending-js-submit">updaing...</div> <div id="result-js-submit"></div>
beforeSend (Local Event)
AJAXリクエストが送信される前に呼び出されます。必要であれば、XMLHttpRequestオブジェクトを操作して追加のheaderを付与してやるなどの処理が行えます。
success (Local Event)
通信が成功した際に呼び出されます。サーバエラーやデータエラーが発生した場合には呼ばれません。
error (Local Event)
通信が失敗した際に呼び出されます。successとerrorが同じ通信で同時に呼ばれることは、決してありません。
complete (Local Event)
通信が完了した際に、成功/失敗にかかわらず呼び出されるものです。よしんば通信が非同期であっても、この関数は実行されます。
Ajax Events
コントローラ (Controllers)
// App/Controllers/AjaxsController.php <?php class AjaxsController extends AppController { var $name = 'Ajaxs'; var $uses = array( 'Testtable'); var $helpers = array( 'Js'); var $components = array( 'RequestHandler'); function js_submit_form(){} function js_submit(){ // Ajax or not // if (!$this->RequestHandler->isAjax()){ // 非推奨 if (!$this->request->is('ajax')){ $this->redirect( '/js_submit_form'); } // save OK if ($this->Testtable->save($this->data)) { $this->render( '/Elements/Ajaxs/ajaxupdated','ajax'); // save NG } else { $this->set('valerror', $this->Testtable->validationErrors); $this->render( '/Elements/Ajaxs/ajaxupdated','ajax'); } } } ?>
$this->request->is('ajax')でリクエストがAjaxかどうかを判定します。urlに'js_submit'と手入力してアクセスした場合は、'js_submit_form'へリダイレクトされます。Inspecting the request
** コントローラ内でdataに値を入れたときに"Indirect modification of overloaded property"と怒られた場合は、このへんを参照して下さい。
エレメント (Ajax処理の結果を返す)
// App/Views/Elements/Ajaxs/ajaxupdated.ctp <?php if (!empty( $valerror['data'])){ for($i=0; $i<count( $valerror['data']); $i++){ echo $valerror['data'][$i]; } } else { echo h( $this->data['Testtable']['data']); }
バリデーションエラーメッセージの取得
モデル (Models)
// App/Models/Testtable.php <?php class Testtable extends AppModel { var $name = 'Testtable'; var $useTable = 'testtables'; var $validate = array( 'data' => array( 'maxlength' => array( 'rule' => array( 'maxlength',255), 'message' => 'text is too long' ), 'notempty' => array( 'rule' => array( 'notempty'), 'message' => 'Enter text' ), ), ); } ?>
関連記事
-
-
selectボックスを実装
今まで、selectボックスのgroupを作成するのにSet::Combineを使用していましたが、意外と簡単にできることに気付いてしまったので、ご紹介。(自分だけ知らなかったことに気付いた と言った
-
-
パス定数と変更方法やURLの取得
CakePHPは基本的にはディレクトリそのまま配置することで構築が可能ではありますが、設定パスを変更することでセキュリティに考慮した構成にすることや運用性をもたせたものにすることが可能になります。
-
-
日付・時間のバリデーション
日付や時刻に関するバリデーションは以下のルールがビルトインされています。 date 日付 time 時刻 datetime 日時 (m:「月」を数字表記 / M:「月」を英語表記)
-
-
HttpSocketを使用してリクエスト送信
CakePHPには、Webサービスへのリクエスト送信のためのHttpSocketクラスが用意されています。 HttpSocket get HTTP GETリクエストを発行します。デモ H
-
-
多言語サイト向けに翻訳ファイルを使って翻訳を行う
CakePHPには、翻訳をビヘイビアを使用する方法と翻訳ファイルを使用する方法の2つがあるそうです。(他にもあるのかな?) 今回は、翻訳ファイルを使用して言語の切り替えを行い、その言語設定をCook
-
-
SQLクエリーをログに出力する
SQLのクエリーをデバッグするには、Debug Kitを使用すればできますが、デバッグログと一緒に出したいのでやり方を調査してみました。 別々のログやビューでみるのもいいですが、秒単位で実行される処
-
-
radioボタンを実装
Radioボタンの実装は、セレクトボックスとほぼ同じです。 個人的にはラジオボタンをすすんで使用することは少ないのですが、2択くらいの選択肢であれば非常に便利ですよね。 今回は、その実装方法 デモ
-
-
Markdown Plugin
「Markdown CakePHP Plugin」は、MarkDown書式をレンダリングしてくれるビューヘルパーです。MarkDownについて勉強しているうちに出会ったので試し打ちです。 ダウンロー
-
-
hasOne アソシエーション
hasOneアソシエーションはテーブル間で1つのレコードに対して他のテーブルに紐付くレコードが1つの場合にjoinする場合に使用します。 CakePHPのドキュメントにならってUserモデルとP
-
-
Formヘルパーのinputタグのdiv/labelなどの設定
Formヘルパーのinputではデフォルトでは以下のようにdivで囲われて、labelが付与されて出力されます。 CSSのフレームワークなどであらかじめ決まったスタイルがある場合に便利に作られていま
Comment
[…] CakePHP 2.x – Jsヘルパーを使用してAjax更新 […]
Jsヘルパーを使用してAjax更新 http://t.co/9hHaR0LAHs
Jsヘルパーを使用して #Ajax 更新 http://t.co/BXsKY6cUX0
#cakephp #trick876
cakephp2 ajax JSヘルパーを使用
[...] http://kwski.net/cakephp-2-x/1057/ [...]