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

関連記事

テーブルからランダムにデータを取り出す(find)

CakePHPでテーブルから特定件数のレコードをランダムに取得するには以下のように指定するとできます。 $this->data = $this->Bulkdata->find( 'all',

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

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

Markdown Plugin

「Markdown CakePHP Plugin」は、MarkDown書式をレンダリングしてくれるビューヘルパーです。MarkDownについて勉強しているうちに出会ったので試し打ちです。 ダウンロー

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

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

Cookieログイン

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

日付・時間のバリデーション

日付や時刻に関するバリデーションは以下のルールがビルトインされています。 date 日付 time 時刻 datetime 日時 (m:「月」を数字表記 / M:「月」を英語表記)

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

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

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

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

checkボックスを実装

selectボックスに引き続いてcheckボックスの実装方法をおさらいしてみます。 コードは、CakePHP 2と1.3両方で実装可能です。デモ モデルは、こちらも以下 CREATE TA

入力文字列の長さ(文字数)をバリデーション

CakePHP 2には、コアバリデーションに文字列の長さを検証する関数が用意されています。 文字列長(コア)バリデーション minLength - 最小文字数以上であること maxLengt

Comment

Message

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

*

PAGE TOP ↑