CakePHP $ajax->slider めも

CakePHP めも php

ハマってしまったところが解決したんで記念めも。
主に自分用。
CakePHPでAjaxヘルパーのsliderメソッドを使う手順。
こんなことがCakePHPでできるようになる。


cookbookとCakePHPポケットリファレンスをみても

できないにゃー、と悩んでる人はお試しください。


動作環境

サーバ：CentOS5.4 + httpd
クライアント：WindowsXP Pro SP3
ブラウザ：Chrome3.0、Firefox3.5


手順

  • scriptaculous-js一式（prototype.js含む）をこことかここから入手。
  • 入手したものを、Webサーバの「Cakeアプリケーション名/webroot/js」以下に置く。
  • scriptaculous-js-****.tar.gzは解凍。$ tar zxvf scri(略
  • 手に入れた「*.js」ファイルが全部jsディレクトリ直下にあるようにする。 
$ ls -1
builder.js
controls.js
dragdrop.js
effects.js
prototype.js
scriptaculous.js
slider.js
sound.js
unittest.js
vendors.php
  • コントローラ内でヘルパー定義を追加する。
var $helpers = array('Ajax', 'Javascript');
    • このとき、デフォルトで読み込まれているヘルパー（FormとかHtmlとか）は書かなくてもおｋ
  • ビュー内でjsファイルを読み込む
echo $javascript->link('prototype', false);
echo $javascript->link('scriptaculous', false);
    • ↑これ！！このlinkメソッドの第二引数超重要！！
    • cookbookでは第二引数にfalse指定してないけど、これがないと動かない。
      • 具体的には、false指定するとjsファイルへのリンクが内に出力される。指定しないと内になる。動かない。
    • ここの議論では最初の「echo 」も取るように修正してるけど、echoはあっても無くても同じだった。
  • とりあえずスライドバーとつまみっぽいものを
    タグとstyleで表示してみる。以下のコードをビュー内に書く。
<div id="バー" style="width:200px; height:16px; background:gray;">
 <div id="つまみ" style="width:16px; height:16px; background:red;"></div>
</div>
  • $ajaxヘルパーのsliderメソッドを呼び出す。以下のコードをビュー内に書く。
echo $ajax->slider('つまみ', 'バー', $options);
    • $optionsで指定できるものはcookbook参照。まだあんまりいろいろ試してない。
      • というより、$optionsについてはwebroot/jsに置いた「slider.js」のコードを見たほうがいいです。
    • このときの「echo」は必須。無いと「CDATA〜」が出力されない。

これでブラウザでアクセスすると、黒いトラックに赤い四角のつまみを持った
スライダーが表示されて、ドラッグで動かせる。


$javascript->linkの第二引数にハマりまくった･･･。
お疲れ様でした。