CakePHP 2.1でjQueryを使用したAjax処理のヘルパーを使ってみる
CakePHP2.1.1でJqueryによるAJAX Helperを使ってみようと思います。
使ってみるのはこれです。
AJAX Helper with jQuery (for CakePHP 2.x)
んでとりあえず配布サイトの説明を訳してみました。ただしてきとー訳ですので参考程度で＾＾；
設置の仕方
- 配布サイトダウンロードページの中ほどにある Installation on CakePHP 2.x 下の Download リンクからDL＆解凍。
- 解凍ファイルから AjaxHelper.php と JavascriptHelper.php ファイルを取り出し、/app/view/helper/ に設置。
- 同じく解凍ファイルから jquery-1.4.2.min.js ファイルを取り出し、/app/webroot/js/ フォルダに設置。
- レイアウトファイル /app/Views/Layouts/default.ctp のヘッダ部分に < ?php echo $this->Html->script(‘jquery-1.4.2.min’); ?> を追加。
- ajaxを使用するコントローラーのヘルパー設定にJavascript, Ajaxを追加。 例： public $helpers = array(‘Html’, ‘Form’, ‘Javascript’, ‘Ajax’);
- view内で < ?php echo $this->Ajax->link(…);?> みたいな感じで使用。
使い方
配布サイトのメソッド一覧に実際の使用例が載ってたりしますので、下のメソッド一覧のリンク先をご参照ください。
メソッド一覧
※各メソッド内の array $options は、jQueryのAjaxのオプション配列です。詳細はこちらや公式をご参照下さい。
link(string $title, string $href, array $options, string $confirm, boolean $escapeTitle)
リクエスト結果は $options[‘update’] で定義されたIDのDOMオブジェクトにインサートされます。
remoteFunction(array $options)
もしカスタムスクリプトを生成、使用する必要がなければ、そんなに何度もは使用されません。
remoteTimer(array $options)
通常$options[‘div’]で指定された特定のdiv要素をajaxリクエストの結果で更新するために使用されます。
コールバックを使用することができます。
form(string $action, string $type, array $options)
そうでなければ、formのsubmitは通常と変わりなく動作します。submitされたdataは、コントローラ内に$this->dataを記述することで使用可能です。
$options[‘update’]でオブジェクトが指定された場合、そのオブジェクトはリクエスト結果で更新されます。
コールバックを使用することができます。
また別のコントローラーにフォームからポストする必要がある場合、第一引数に $options array を使用できます。
submit(string $title, array $options)
observeField(string $fieldId, array $options)
observeForm(string $fieldId, array $options)
$optionsは、連続したフォームの値(stringリクエスト)を評価する$options[‘with’]オプションのデフォルト値以外は、observeField()のものと同じです。
autoComplete(string $fieldId, string $url, array $options)
$urlに指定する外部のアクションはオートコンプリートのリストを返す必要があります。
drag(string $id, array $options)
drop(string $id, array $options)
dropRemote(string $id, array $options, array $ajaxOptions)
slider(string $id, array $options)
editor(string $id, string $url, array $options)
$urlは編集された要素のデータを保存するアクションである必要があります。
sortable(string $id, array $options)
selectable(string $id, array $options)
また、ctrlキーを押しながらクリックもしくはドラッグすることで飛び石選択も可能です。
resizable(string $id, array $options)
accordion(string $id, array $options)
button(string $id, array $options)
基本的なボタンに加え、ラジオボタンとチェックボックスをボタンで表示することもできます。
（この場合、設定されているラベルはボタンに表示されます）
ラジオボタンのグループ化に関してですが、このbuttonメソッドは、ボタンセットと呼ばれる追加ウィジェットメソッドを提供します。
これはラジオボタンを含む親要素を選択し、buttonset()をコールすることで使用できます。
またボタンセットは視覚的なグルーピングを提供しますので、もしボタンのグループがある際は使用するべきです。
これは全ての子、孫要素を選択し、button()メソッドを適用することで動作します。
これらボタンセットは動作、非動作の切り替えが可能です。また、ボタン破棄メソッドをコールすることでボタンセットを破棄することもできます。
datepicker(string $id, array $options)
日付形式や言語、日付選択範囲の制限やボタン追加他操作オプションのカスタマイズが簡単にできます。
dialog(string $id, array $options)
ダイアログウィンドウはデフォルトで移動、サイズ変更、×ボタンでウィンドウを閉じることが可能です。
ウィンドウ内の表示文字数がウィンドウの大きさを超える場合、スクロールバーが表示されます。
progressbar(string $id, array $options)
このプログレスバーはCSSで柔軟なサイズ設定が可能で、デフォルトでは親要素の大きさにぴったり合うように作られています。
tabs(string $id, array $options)
デフォルトでは、タブウィジェットはonCLickでタブ切り替えされますが、オプションでonHoverによるイベント発生も設定できます。
タブのコンテンツはタブにhrefを設定することでAjax経由で読み込むこともできます。
技術評論社
売り上げランキング: 180
One Response to CakePHP 2.1でjQueryを使用したAjax処理のヘルパーを使ってみる
- Pingback:【php】cakePHP2をさらっとおさらい – A hint of smart agri
コメントを残す