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']);
}
** 1.3では、1つのフィールドに対して[Model]->validationErrorsに格納されるエラーメッセージは、1つのルールだけでしたが、バリデーションエラーになった全てのメッセージを返してくれるようです。配列になっています。
バリデーションエラーメッセージの取得

モデル (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'
            ),
        ),
    );
}
?>
  • このエントリーをはてなブックマークに追加

関連記事

Cookieログイン

今回は、ログイン画面でよくみかけるクッキーログインの機能を使ってみます。 CakePHPには、Cookieコンポーネントがあります。(PHPのsetcookieメソッドのラッパー)メソッドはwr

パス定数と変更方法やURLの取得

CakePHPは基本的にはディレクトリそのまま配置することで構築が可能ではありますが、設定パスを変更することでセキュリティに考慮した構成にすることや運用性をもたせたものにすることが可能になります。

独自のバリデーションルールを作成

CakePHPで組み込みバリデーションルールをつくる方法は、正規表現を定義する方法と独自メソッドを定義する方法の2つがあるようです。 参考 Custom Validation Rules 正規

CakeEmailでメール送信(@gmail)

CakePHP 2になって追加されたクラスCakeEmailがシンプルに使えます。これを使用してメール送信を行う処理を実装してみました。 CakeEmailクラスの読み込み /app/Config

コントローラ内でバリデーション処理を呼び出す

CakePHPでは、saveメソッドの際にバリデーション処理も自動で行われますが、save処理と切り離してバリデーションを行うこともできます。このときは、save時と若干異なる処理体系になります。

(メール・URL・電話・郵便・IP) データ バリデーション

今回は、プロフィール情報に使用されるデータに絞ったバリデーションルールです。 バリデーションルール 以下の5つのバリデーションルールがコアに用意されています。 email メールアドレス

アップロードファイルのバリデーションルール

CakePHP 2.2や2.3になってファイルアップロードに対するルールがコアバリデーションに追加されているようで、まとめてみました。 コアバリデーション 関連しそうなルールは以下の4つの

recursive設定によるfind()性能改善

CakePHPでは、モデルにアソシエーションを設定している場合、recursive(=>joinする階層)はデフォルトで0に設定されています。「recursiveゼロ」の意味するところとは、「1跨ぎま

DebugKitを導入

定番のブログチュートリアルをこなして、定番のDebugKitを導入してみました。 2.3からはCakePHPインストール直後に以下のように導入を推奨するような警告メッセージが表示されるようになりまし

複数ファイルアップロードフォーム

CakePHP 2.0からはHTML5が標準でサポートとなり、複数ファイルアップロードのためのフォーム記述が容易になりました。 View (ビュー) 配列 Array (

Comment

ぐっち (@gucci_i9) へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑