CakePHP で ajax に挑戦中。 

まずは Sliderを表示してみる。CakePHPの機能を使って。 

まずはscript.aculo.usファイルをダウンロード

必要なjsライブラリをダウンロード 

ここから。 

http://script.aculo.us/ 

現時点での最新は1.8.3でした。 

で、配置

今回は[app/webroot/js/]以下にフラットに配置してみた。 

こんな感じで 

app/webroot/js/ 

|- prototype.js 

|-builder.js 

`-… 

Controller

コントローラでは、以下のプロパティを設定。 

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

Layout

Layoutに以下を追加(必ず <head>と</head>の間に) 

# head部分に書いてないとうまく動かなくて、かなり苦労した。 

<?php
$files = array('prototype', 'scriptaculous');
echo $javascript->link($files);
?>

view

viewに以下を書く。 

 
<?php
$options = array(
	'axis' => "horizontal",
	'sliderValue' => '50',
	'maximum' => '100',
	'minimum' => '1',
	'range' => '$R(1, 100)',
	'values' => '$R(1, 100)',
	'onChange' => 'function(value){
			$("sliderValue").innerHTML = "Value:"+value;
		}',
	'onSlide' => 'function(value){
			$("sliderValue").innerHTML = "Value:"+value;
		}',
);
echo $ajax->slider(“pointer”, “sliderDiv”, $options);
?>

<div id=”sliderDiv” style=”background-color:#e0e0e0;width:200px;height:10px;”>
<div id=”pointer” style=”background-color:#c0c0c0;width:10px;height:10px;”></div>
</div>
<div id=”sliderValue”></div>

 

ブラウザで確認

うまくいけば、スライダーが表示されているはず。 

で、スライドすると数値が変化していく感じ。