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

更新処理でページ遷移を伴う場合、ページ全体をレスポンスするのに対して、Ajax処理ではページの一部のレスポンスが可能となるためサーバからの通信量を抑えることが可能となります。
Jsヘルパーを使用して、簡単なサンプルを作成しました。(デモ)
[追] 2.2版でも作成しましたので参照ください。(こちら)

head

JQuery本体をロードして下さい。

<?php 
    // jQuery
    echo $html->script( 'jquery.min.js', array( 'inline' => 'false'));
    // Jsヘルパーが生成するJSを出力させる
    echo $this->Js->writeBuffer( array( 'inline' => 'true'));
?>

ビュー (View)

// app/views/ajax/dispajaxupdate.ctp
<?php 
    echo $form->create( 'Testtable', array( 'type'=>'post'));
    echo $form->text( 'data');
    echo $this->Js->submit( 'Update', array( 'url'=>'ajax/ajaxupdate', 'update'=>'#result-ajaxupdate')); 
    echo $form->end();
?>
<div id="result-ajaxupdate"></div>

'url' ... Ajax処理で呼び出すURL(controller/action)
'update' ... ajax更新の結果を出力する要素

コントローラ (Controller)

// [app/controllers/ajax_controller.php]
<?php
class AjaxController extends AppController {
    var $name = 'Ajax';
    var $uses = array( 'Testtable');
    var $helpers = array( 'Js');

function dispajaxupdate(){}

function ajaxupdate(){
    // Ajax or not
    if (!$this->RequestHandler->isAjax()){
        $this->redirect( 'ajax/dispajaxupdate');
    }
    // save OK
    if ($this->Testtable->save( $this->data)) {
        $this->render( '/elements/ajax/ajaxupdated', 'ajax');
    // save NG
    } else {
        $this->set( 'valerror', $this->Testtable->validationErrors);
        $this->render( '/elements/ajax/ajaxupdated', 'ajax');
    }
}
}
?>

(Ajaxという名前でなくてもいいです。)
$this->RequestHandler->isAjax()
Ajaxかどうかを判定します。urlに'ajax/ajaxupdate'と手入力してアクセスした場合は、'ajax/dispajaxupdate'へリダイレクトされます。

エレメント (Ajax処理の結果を返す)

// app/views/elements/ajax/ajaxupdated.ctp
<?php 
if (!empty( $valerror['data'])){
    echo $valerror['data'];
} else {
    echo h( $this->data['Testtable']['data']);
}
?>

モデル (Model)

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

関連記事

n__cakePHP13

Textヘルパー

Textヘルパーには、テキスト処理に関する便利な機能があります。リンク付与やテキストの抜粋・ハイライトや切り取り処理など。ソース:/cake/libs/view/helpers/text.php

n__cakePHP13

メール送信(qdmail)

CakePHP(+qdmail)でメール送信する処理を実装しました。 準備 2つのライブラリ(.php)をダウンロードし、以下のように配置して下さい。 app/controllers/compo

no image

独自のバリデーションルール

CakePHPで組み込みバリデーションをつくる方法は色々あります。 参考:Data Validation — CakePHP Cookbook v1.3 documentation 上記リンク内に

no image

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

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

n__cakePHP13

ログインに追加の条件を付与する「userScope」

「ユーザ登録」の続きです。 ユーザ登録後、activate(statusを0に設定するを)せずに「仮登録」のままで、正しいusernameとpasswordでログインを試したところ認証に引っかかって

n__cakePHP13

Cookieログイン

今回は、「keep me logged in」などログイン画面でよくみかけるクッキーログインの機能を使ってみます。 CakePHPには、Cookieコンポーネントがあります。(PHPのsetcook

n__cakePHP13

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

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

n__cakePHP13

複数データベースの追加と切替

CakePHPで複数のデータベースに切替を行うということがあると思います。(個人的にはあまりない) 今回、CakePHPからWordpressのデータベースへの接続を行う機会があったので設定を試して

no image

Htmlヘルパー

ソース:\cake\libs\view\helpers\html.php charset / 文書の文字コードを設定する <?php echo $this->Html-

no image

validateErrors と validationErrors

CakePHP試験中に気付いたことがあって、メモです。 $this->validateErrors自身バリデーション処理している 今まで、save時にバリデーションエラーメッセージををログに出力し

Message

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


*

PAGE TOP ↑