今さらなのですが CakePHP1.1 で Ajax のフォームを作成するというのをやったのでメモしておきます。

Ajax , Javascript ヘルパーを使用できるようにする

コントローラで Ajax, Javascritp ヘルパーを使用できるようにする。
var $helpers = array('Ajax', 'Javascript');

prototype.js を読み込む

webroot/js に prototype.js を配置し、ビューで読み込みます。
<?php echo $javascript->link('prototype'); ?>

ビューでフォームを作成する

今回は submit ボタンを押した後、更新中には submit ボタンを消して変わりに「更新中」というメッセージを表示し、更新終了後にメッセージをボタンの下の id=ajax_message に表示するようにしました。

<?php
$options = array(
    "update" => "ajax_message",
    "loading" => "Element.hide('ajax_button'); Element.show('ajax_loading');",
    "complete" => "Element.show('ajax_button'); Element.hide('ajax_loading');",
    );
echo $ajax->form("/controller/action/", "post", $options);
?>
<?php echo $html->input('Model/Field', array('type'=>'text')); ?><br>
<input type="submit" id="ajax_button">
<div id="ajax_loading" style="display:none;">更新中...</div>
<div id="ajax_message"></div>

$ajax->form の $options の
“update” で更新するメッセージ領域を指定し、
“loading”でアップロード中の動き、
“complete” で処理終了後の動き
を指定しています。

コントローラに Ajax で処理するアクションを作成

function action() {
    $this->layout = 'ajax';
    /* $this->data にフォームの内容が渡るので必要な処理を書く */
    $this->Model->id = $this->data['Model']['id'];
    $this->Model->saveField("Field", $this->data['Model']['Field'], true);
}

$this->layout で ‘ajax’ を指定して余計なヘッダ、フッタが出ないようにします。

Ajax で出力するビューを作成する

上のコントローラのアクションで出力するビューを作成します。
上の例では saveField でフォームから送られてきたデータを使用して更新処理しています。その結果によってメッセージを送信します。

<?php
if($msg=$error->messageFor('Model/Field')) {
    echo $msg;
} else {
    echo "更新しました";
}
?>

関連する投稿