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

関連記事

多言語サイト向けに翻訳ファイルを使って翻訳を行う

CakePHPには、翻訳をビヘイビアを使用する方法と翻訳ファイルを使用する方法の2つがあるそうです。(他にもあるのかな?) 今回は、翻訳ファイルを使用して言語の切り替えを行い、その言語設定をCook

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

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

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

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

バリデーション前後に処理を追加できる「beforeValidate」「afterValidate」

CakePHPでは、「beforeValidate」「afterValidate」というバリデーション処理の前後で追加の処理を実装できるコールバック関数が用意されています。 beforeVali

CakeEmailでメール送信(@gmail)

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

hasOne アソシエーション

hasOneアソシエーションはテーブル間で1つのレコードに対して他のテーブルに紐付くレコードが1つの場合にjoinする場合に使用します。 CakePHPのドキュメントにならってUserモデルとP

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

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

ユーザ登録(仮登録・メール・本登録)

以前1.3版で投稿した「ユーザ登録」処理の2.x版を作成しました。フローは同じで以下のようにします。 1. メールアドレス・パスワードでユーザ登録 2. この時点では仮登録として、本登録用のU

no image

HttpSocketを使用してリクエスト送信

CakePHPには、Webサービスへのリクエスト送信のためのHttpSocketクラスが用意されています。 HttpSocket get HTTP GETリクエストを発行します。デモ H

FormヘルパーのMagicOption (マジックオプション) 

Formヘルパーでは、「フィールド名」,「テーブルカラムのデータ型」もしくはモデルの「バリデーション設定」によりフォーム要素を決定したり、自動で属性を付与する「マジックオプション」と呼ばれるものがある

Comment

Message

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

*

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

    PAGE TOP ↑