CakePHP + ajax remoteFunction に引き続いて以下の4つのメソッドを試してみた。

  • form
  • submit
  • observeField
  • observeForm

jsファイルを配置

ここは今まで通り省略します。

コントローラ

前回と一緒ですが、以下のようにコントローラを準備する。

[app/controllers/test_controller.php]

<?php
class TestController extends AppController {

	var $name = 'Test';
	var $uses = array();
	var $helpers = array('Ajax', 'Javascript');
	var $components = array( 'RequestHandler' );

	function index() {
	}

	function view() {
	}
}
?>

layout

layoutも前回と同様

<?php
	if (!empty($javascript)) {
		$files = array('prototype', 'scriptaculous');
		echo $javascript->link($files);
	}
?>

View

2つのviewを用意する。
[app/views/test/index.ctp]

<h1>ajax Test</h1>

<?php
echo $form->create();
$options = array(
	'rows' => '5',
);
echo $form->input('result', $options);
echo $form->end();
?>

<hr>

<?php
echo $ajax->form('view', 'post', array('update'=>'result'));
echo $form->input('message1', array('default'=>'Hello'));
echo $form->submit('submit1');
echo $form->end();
?>

<hr>

<?php
echo $form->create();
echo $form->input('message2', array('default'=>'Good bye'));
echo $ajax->submit('submit2', array('url'=> array('action'=>'view'), 'update' => 'result'));
echo $form->end();
?>

<hr>

<?php
echo $form->create();
$numbers = array( 1 => 'One', 2 => 'Two', 3 => 'Three' );
echo $form->input( 'number', array( 'options' => $numbers ) );
echo $form->end();
?>
<?php
$options = array(
	'url' => array( 'action' => 'view' ),
	'update' => 'result',
	'frequency' => 0.2,
);
echo $ajax->observeField('number', $options);
?>

<hr>

<?php
echo $form->create(null, array('id' => 'form4'));
echo $form->input( 'number', array( 'options' => $numbers ) );
echo $form->end();
echo $ajax->observeForm('form4', $options);
?>

[app/views/test/view.ctp]

<?php
	if ($this->data) {
		var_dump($this->data);
	}
?>

ブラウザで表示する

ボタンを押したり、ドロップダウンで選択したりすると、一番上の”Result”という中にサーバに渡されたデータが表示されます。