[PHP][CakePHP]CakePHP Ajax 対応

Submitted by Derick Ng on 5 March 2009 - 10:57am

script.aculo.us の src 以下にある js ファイルを app/webroot/js にコピーする
prototype.js を app/webroot/js にコピーする
app/views/layouts/ 以下にファイルがないとデフォルトのレイアウトが適用される。デフォルトレイアウトは cake/libs/view/layouts/default.ctp にある。
ここにある default.ctp を app/views/layouts/ 以下にコピーして以下の箇所を変更する

<?php
echo $html->meta('icon');
echo $html->css('cake.generic');
echo $scripts_for_layout;
?>

prototype.jp と scriptaculous.js を読み込むようにする

echo $javascript->link('prototype');
echo $javascript->link('scriptaculous');

charset や html の meta 情報もここで定義されているので各ページには基本的に必要ない。
index.ctp の 部に以下を追加

<h1>linkh1>
<div id="user">
div>
<?php echo $ajax->link('View User',
array('controller' => 'users', 'action' => 'view', 1),
array('update' => 'user', 'complete' => 'alert("Hello World")' )
);
?>

<h1>autoCompleteh1>
<?php echo $form->create('User', array('url' => '/users/index')); ?>
<?php echo $ajax->autoComplete('User.username', '/users/autoComplete')?>
<?php echo $form->end('View user')?>

views/users/view.ctp を作成

<html> <head>
<meta name="Content-Type" content="text/html; charset=utf-8">

<title>title>
head>

<body>
<h1><?php echo $user['User']['username'] ?>h1>
<p>
<small>password: <?php echo $user['User']['password'] ?>small>
p>

<p>
<small>趣味: <?php echo $user['Profile']['hobby'] ?>small>
p>

body> html>

views/users/auto_complete.ctp を作成

<ul>
<?php foreach($users as $user): ?>
<li><?php echo $user['User']['username']; ?>li>
<?php endforeach; ?>
ul>

users_controll.php に以下を追加

var $helpers = array('Html', 'Javascript', 'Ajax');

function view($id = null)
{
$this->User->id = $id;
$this->set('user', $this->User->read());
}

function autoComplete() {
$this->set('users', $this->User->find('all', array(
'conditions' => array(
'User.username LIKE' => $this->data['User']['username'].'%'
),
'fields' => array('username')
)));
$this->layout = 'ajax';
}

app/webroot/css に my.css を準備して以下を記述する

div.auto_complete {
position: absolute;
width: 250px;
background-color: white;
border: 1px solid #888;
margin: 0px;
padding: 0px;
}

li.selected {
background-color: #ffb;
}

app/views/layouts/default.ctp に my.css を読み込ませるようにする

echo $html->css('cake.generic');
echo $html->css('my');