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'
            ),
        ),
    );
}
?>

Related

Jsヘルパーを使用してAjax更新 複数ファイルアップロードフォーム FullCalendarを使用してカレンダーアプリケーション 複数ファイルアップロード アップロードファイルのバリデーションルール Formヘルパーのinputタグのdiv/labelなどの設定 ユーザ登録(仮登録・メール・本登録) FormヘルパーのMagicOption (マジックオプション)