CakePHP1.3.6, jQuery1.4.3：Javascriptを利用する。

php cakephp jQuery

これまでのログではJavascriptを使ってこなかったが、使わないわけにはいかない。
レイアウトを使わずにテンプレート（ctpファイル）のみを使うのであれば、普通通りにscriptタグが使える。
だが、レイアウトを使いたい。
だが、たとえば、ctpファイルに

<script>alert('hello');</script>

<h1>メイン・メニュー</h1>
<br>
<?php
echo $html->link('顧客管理',
  array('controller'=>'customers', 'action'=>'index'));
?>

と書いて、これまで使ってきたレイアウトを適用すると以下のようなHTMLが吐き出される。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
	メインメニュー</title>
<link rel="stylesheet" type="text/css" href="/workspace/cakesample/css/cake.generic.css" /><link rel="stylesheet" type="text/css" href="/workspace/cakesample/css/myznala.default.layout.css" /><link rel="stylesheet" type="text/css" href="/workspace/cakesample/css/myznala.layout.css" /><link rel="stylesheet" type="text/css" href="/workspace/cakesample/css/myznala.design.css" /></head>
<body>
<div id="egp-my-container">

	<div id="egp-my-header">
		<div class="egp-my-inner">
		<img src="/workspace/cakesample/img/obs.logo.gif" alt="openBusinessSuite" />2010-12-08      	</div>

	</div>

	<div id="egp-my-content">
		<div class="egp-my-inner">
				<script>alert('hello');</script>
<h1>メイン・メニュー</h1>
<br>
<a href="/workspace/cakesample/customers">顧客管理</a>		</div>
	</div>

	<div id="egp-my-footer">
		<div class="egp-my-inner">
		Some rights reserved by EzoGP Project.
		</div>
	</div>

</div>
</body>
</html>

動くことには違いがないが、bodyタグに埋め込まれてしまう。
HTMLヘルパーのscriptBlock()を使うと、レイアウトに埋め込んだ

	echo $scripts_for_layout;

にスクリプトが出力されるというのでやってみた。また、webroot/jsにjsファイルを置くと、（これも）HTMLヘルパーのscript()で読み込めるようなので、jQueryとjQueryUIを本家サイトからダウンロードして置いてみた。

さきのサンプルのビューを以下のように改造する。
bodyがreadyとなったタイミングで「hello」と表示されるアラートをあげる。

<?php
	echo $html->script(array('jquery-1.4.3.min','jquery-ui-1.8.6.custom.min'),false); 
	$script =
			"$('body').ready(alert('hello'));" 
	;
	echo $html->scriptBlock($script,array('inline'=>false));
?>

<h1>メイン・メニュー</h1>
<br>
<?php
echo $html->link('顧客管理',
  array('controller'=>'customers', 'action'=>'index'));
?>

これで「hello」とアラートが上がる。HTMLは以下のようになった。レイアウトでは、echo $scripts_for_layoutの直前にCSSを読み込んでいるのだが、これらの間にJSファイルが読み込まれている。
スクリプトを変数に設定することに違和感がある（制約もあるだろうなぁ）から、ページ内にはイベントハンドラーをおいて、JSファイルに書くのがいいように感じる。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
	メインメニュー</title>
<link rel="stylesheet" type="text/css" href="/workspace/cakesample/css/cake.generic.css" /><link rel="stylesheet" type="text/css" href="/workspace/cakesample/css/myznala.default.layout.css" /><link rel="stylesheet" type="text/css" href="/workspace/cakesample/css/myznala.layout.css" /><link rel="stylesheet" type="text/css" href="/workspace/cakesample/css/myznala.design.css" /><script type="text/javascript" src="/workspace/cakesample/js/jquery-1.4.3.min.js"></script>
	<script type="text/javascript" src="/workspace/cakesample/js/jquery-ui-1.8.6.custom.min.js"></script>
	<script type="text/javascript">
//<![CDATA[
$('body').ready(alert('hello'));
//]]>
</script></head>
<body>
<div id="egp-my-container">

	<div id="egp-my-header">
		<div class="egp-my-inner">
		<img src="/workspace/cakesample/img/obs.logo.gif" alt="openBusinessSuite" />2010-12-09      	</div>
	</div>

	<div id="egp-my-content">
		<div class="egp-my-inner">
				
<h1>メイン・メニュー</h1>

<br>
<a href="/workspace/cakesample/customers">顧客管理</a>		</div>
	</div>

	<div id="egp-my-footer">
		<div class="egp-my-inner">
		Some rights reserved by EzoGP Project.
		</div>
	</div>

</div>
</body>
</html>