CakePHP 2.1でjQueryを使用したAjax処理のヘルパーを使ってみる

投稿日 2012年4月24日カテゴリ : PHP タグ : Ajax, cakePHP, jQuery

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)

リンクがクリックされた際、XMLHttpRequestを使用して裏で呼ばれる$options[‘url’] か $href で定義された外部アクションへのリンクを返します。
リクエスト結果は $options[‘update’] で定義されたIDのDOMオブジェクトにインサートされます。

remoteFunction(array $options)

この機能は、リモートコールに必要なjavascriptを生成し、link()のヘルパーとして主に使用されます。
もしカスタムスクリプトを生成、使用する必要がなければ、そんなに何度もは使用されません。

remoteTimer(array $options)

定期的に$options[‘url’]で設定されたアクションを呼びます。頻度は$options[‘frequency’]で秒単位で設定します。
通常$options[‘div’]で指定された特定のdiv要素をajaxリクエストの結果で更新するために使用されます。
コールバックを使用することができます。

form(string $action, string $type, array $options)

POST,GETによる通常のHTTPリクエストの代わりに、XMLHttpRequestを使用して$actionにsubmitするformタグを返します。
そうでなければ、formのsubmitは通常と変わりなく動作します。submitされたdataは、コントローラ内に$this->dataを記述することで使用可能です。
$options[‘update’]でオブジェクトが指定された場合、そのオブジェクトはリクエスト結果で更新されます。
コールバックを使用することができます。
また別のコントローラーにフォームからポストする必要がある場合、第一引数に $options array を使用できます。

submit(string $title, array $options)

$options[‘url’]で指定されたURLにformをsubmitし、$options[‘update’]で指定されたdiv要素を更新するためのsubmitボタンを返します。

observeField(string $fieldId, array $options)

$field_idで指定されたDOM IDのフィールドを監視し、内容に変更があった場合XMLHttpRequestを生成します。

observeForm(string $fieldId, array $options)

observeField()と同じような感じですが、DOM ID $form_idで指定されたフォーム全体を操作します。
$optionsは、連続したフォームの値(stringリクエスト)を評価する$options[‘with’]オプションのデフォルト値以外は、observeField()のものと同じです。

autoComplete(string $fieldId, string $url, array $options)

$fieldIdで指定されたテキストフィールドをオートコンプリート形式でレンダリングします。
$urlに指定する外部のアクションはオートコンプリートのリストを返す必要があります。

drag(string $id, array $options)

$idによって指定されたDOM要素をドラッグ可能にします。

drop(string $id, array $options)

$idによって指定されたDOM要素へのドロップを可能にします。

dropRemote(string $id, array $options, array $ajaxOptions)

ドラッグ可能な要素がドロップされた場合にXMLHttpRequestを生成するターゲットを作成します。

slider(string $id, array $options)

直接操作可能なスライダーを作成します。

editor(string $id, string $url, array $options)

DOM要素 $idで指定された箇所に編集フィールドを作成します。
$urlは編集された要素のデータを保存するアクションである必要があります。

sortable(string $id, array $options)

$idで指定された、並べ替え可能なフロートオブジェクトのリストもしくはグループを作成します。

selectable(string $id, array $options)

エレメント上でマウスをドラッグすることで範囲選択を可能にします。
また、ctrlキーを押しながらクリックもしくはドラッグすることで飛び石選択も可能です。

resizable(string $id, array $options)

要素の端をドラッグすることで大きさが変更できます。幅と高さの最大、最小が指定できます。

accordion(string $id, array $options)

折りたたみ（アコーディオン）ウィジェットを作成します。

button(string $id, array $options)

button、submit、アンカーなどの標準形式のボタンを、適切なマウスオーバーおよび活発なスタイルを備えたものに機能的に強化したものです。
基本的なボタンに加え、ラジオボタンとチェックボックスをボタンで表示することもできます。
（この場合、設定されているラベルはボタンに表示されます）
ラジオボタンのグループ化に関してですが、この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経由で読み込むこともできます。

WEB+DB PRESS Vol.75

posted with amazlet at 13.06.24

栗林健太郎柴田博志黒田良安宅啓松下雅和桑野章弘 Jxck 伊藤直也佐藤鉄平中川勝樹登尾徳誠奥野幹也近藤宇智朗堀江幸紀後藤秀宣渡邊恵太中島聡 A-Listers はまちや2
技術評論社
売り上げランキング: 180

Amazon.co.jpで詳細を見る