CakePHP2 で JavaScript を使いたいですが、いまさらながら初めてのことでしたので
- CakePHP2 への JavaScript 導入方法
- 簡単なサンプルの作成。ラジオボタンの一方を選択すると隣のセレクトボックスが操作できたりできなくなったりする。
の二つをメモします。
CakePHP2 への JavaScript 導入方法
JsHelper ではなく、HtmlHelper を使います。JsHelper は jQuery などのエンジンを使いたい場合に使用するようです。
ビューで、次のように書きますと、ヘッダー部分に自動で追加されます。ヘッダーではなく、書いた場所に追加したい場合は、オプションの inline 指定で可能です。
<?php $this->Html->scriptStart(array('inline' => false)); ?>
alert("I am in the javascript");
<?php $this->Html->scriptEnd(); ?>
CakePHP の本家ドキュメントでは JavaScript 部分もヘルパーで出力していますけれども、こちらの参考ページのとおり scriptStart と scriptEnd の PHP をそれぞれいったん閉じて、その間に直に JavaScript を書いても OK です。
jQuery やヘルパーを使わずに、JavaScript を直に書きたいときは上述のサンプの方法が便利です。。
参考ページです。ありがとうございます。
簡単なサンプルの作成。ラジオボタンの一方を選択すると隣のセレクトボックスが操作できたりできなくなったりする。
ここから実践編です。といっても小見出しのサンプルを載せておくだけです。ビューにコピペすれば動きが確認できます。
<?php $this->Html->scriptStart(array('inline' => false)); ?>
function disableSelect() {
// onclickされた時のthis(自分自身)を取得
var e = (window.event)? window.event : arguments.callee.caller.arguments[0] ;
var self = e.target || e.srcElement;
// セレクトボックスの活性・非活性を行う。
if (self.id == 'UserSex2') {
document.getElementById('UserJobType').disabled = true;
} else {
document.getElementById('UserJobType').disabled = false;
}
}
<?php $this->Html->scriptEnd(); ?>
<h2>テストフォーム</h2>
<?php echo $this->Form->create('User'); ?>
<?php
echo $this->Form->input('username', array('label' => 'ユーザ名', 'type' => 'txet', 'div' => false));
echo $this->Form->input('sex', array('label' => '性別', 'type' => 'radio', 'options' => array(1 => '男', 2 => '女'), 'onclick' => 'disableSelect()', 'div' => false, 'legend' => false));
echo $this->Form->input('job_type', array('label' => '職種', 'type' => 'select', 'options' => array(1 => 'レスキュー隊', 2 => '力士', 3 => '第一空挺団', 4 => 'ＳＡＴ', 5 => '女形'), 'div' => false));
?>
<?php echo $this->Form->end('送信'); ?>
ポイントは、20行目のラジオボタンです。第2引数のオプションの中で、「’onclick’ => ‘disableSelect()’」と指定します。そうすれば、HTML タグの中で「onclick=”disableSelect()”」と出力されます。
注意点としては、この例では男、女のラジオですけれども、onclick に指定できる内容は1つだけ、ということです。同じロジックしかかけませんので、男、女、どちらがクリックされたかをプログラムの中で判定しなければなりません。
補足として、コントローラーは中身のまったく無いアクションを作っておけばよいですし、モデルは不要です。サンプルを確認するには、ビューに注力していろいろいじればよいのです。
上記のビューのページを表示したときの HTML 出力は次のようになります。見やすくなるように適宜改行、インデントを入れています。
<head>
…略…
<script type="text/javascript">
//<![CDATA[
function disableSelect() {
// onclickされた時のthis(自分自身)を取得
var e = (window.event)? window.event : arguments.callee.caller.arguments[0] ;
var self = e.target || e.srcElement;
// セレクトボックスの活性・非活性を行う。
if (self.id == 'UserSex2') {
document.getElementById('UserJobType').disabled = true;
} else {
document.getElementById('UserJobType').disabled = false;
}
}
//]]>
</script>
…略…
</head>
<body>
…略…
<h2>テストフォーム</h2>
<form action="/cake02/test" id="UserIndexForm" method="post" accept-charset="utf-8">
<div style="display:none;"><input type="hidden" name="_method" value="POST"/></div>
<label for="UserUsername">ユーザ名</label>
<input name="data[User][username]" type="txet" id="UserUsername"/>
<input type="hidden" name="data[User][sex]" id="UserSex_" value=""/>
<input type="radio" name="data[User][sex]" id="UserSex1" onclick="disableSelect()" value="1" />
<label for="UserSex1">男</label>
<input type="radio" name="data[User][sex]" id="UserSex2" onclick="disableSelect()" value="2" />
<label for="UserSex2">女</label>
<label for="UserJobType">職種</label>
<select name="data[User][job_type]" id="UserJobType">
<option value="1">レスキュー隊</option>
<option value="2">力士</option>
<option value="3">第一空挺団</option>
<option value="4">ＳＡＴ</option>
<option value="5">女形</option>
</select>
<div class="submit"><input type="submit" value="送信"/></div>
</form>
…略…
</body>
先ほど注意書きしたように、onclick には1種類のロジックしかかけませんので呼び出す関数内部で、どちらのラジオがクリックされたか、自分自身を取得することで判断しています。
参考になったページです。ありがとうございます。CakePHP2 というよりも JavaScript についてわからないことが解決しました。
以上です。ありがとうございます。