CakePHP+jQuery

wordpressのwp.Vicunaは軽そうでいいんだけど、どうもiG:Syntax Hiliter のレイアウトがくずれるな。

最近CakePHPを使ってみているけれども、ちょっとはまったのでメモ。
はまった状況は下記の通り。

1. 現象
   下記をもちいた文字列コンプリーション機能を持つテキストボックスの作成において、意図したとおりの動作をしないケースがあった。
   1. CakePHP
   2. jQuery
   3. autocompleteライブラリ(JSON使用)
   4. IE

   ただし、Firefoxでは正常に動作した。

2. 実装
   今回の問題となった実装を述べる。
   CakePHPを用いて作成したWebページにおいて、Ajaxによる文字列コンプリーションを行った。
   具体的な実装方法は以下の通り。
   1. jQueryのautompleteプラグインを用いてコンプリーション機能を持つテキストボックス(input type=”text”)を作成する。コンプリート用のデータはJSON形式でJavascript側に渡すとする。データ取得用のURLは“～～/モデル名/autocomplete/”とする。
   2. Javascript側に渡すJSONデータを返すページをCakePHPで作成する。適当なコントローラにfunction autocomplete()を追加し、対応するビュー(autocomplete.thtml)を作成する。 autocomplete()内で$this->layout = “ajax”;とし、余計なhtmlタグを出力しないようにする。
   3. autocomplete.thml内にJSON形式でデータを出力するコードをかく。
3. 原因
   “～～/モデル名/autocomplete/”で返すページにCakePHPが自動的に表示にかかった時間を出力していた。
   出力されていたのはHTMLコメント形式のデータ<!– x.xxx s –>。
   結果として返されていたデータは下記のような形式となっていた。
   [‘aaa’,’bbb’,’ccc’] <!– 0.123s –>
   jQueryのJSONパーザにおいて、Firefoxでは上記形式を正しくパーズできるが、IEでは処理できずにエラーとなっていた。
4. 対処
   “config/core.php”で定義されているdefine(‘DEBUG’, 1);を0にすれば、時間出力はされなくなるので、実際にリリースする際は問題ない。ただし開発中はDEBUGを定義しておきたいため、今回は “webroot/index.php”の最下段

   
   if (Configure::read() > 0) {
   echo "<!-- " . round(getMicrotime() - $TIME_START, 4) . "s -->";
   }
   

   をコメントアウトした。

5. 参考文献
   1. CakePHP
   2. jQuery
   3. autocomplete

以上