ARTS NET

JavaScriptでセレクトボックスの連動をもとにアマゾンと楽天のカテゴリが連動するセレクトボックスを作ります。アマゾンは静的にしかセレクトボックスのオプションアイテムを渡せませんが、楽天ウェブサービス（Rakuten Web Service）では楽天ジャンル検索APIというのがあって楽天にリクエストを渡せば現在のジャンルを返してくれます。活用すればジャンル名やジャンルコードの変更が生じてもメンテナンスフリーな画面が作れます。

レスポンスはXML形式とJSON形式を選べますがJavaScriptでセレクトボックスの連動をもとにするのでJavaScriptと相性のいいJSON形式にします。JSONのデータを見る場合はブラウザのURL欄に以下のURLを入力してアクセスします。ブラウザの画面にサーバから返されたデータが表示されます。[YOUR_developerID]のところはご自分で取得した楽天デベロッパーIDが入ります。

http://api.rakuten.co.jp/rws/2.0/json?developerId=[YOUR_developerID]&operation=GenreSearch&version=2007-04-11&genreId=0

続きを読む…

タグ

関連する投稿

• InPlaceEditorをダブルクリックで使う (0)
• フォーム送信前にJavaScriptでdisabled解除 (0)
• prototype.jsでタブメニュー (0)
• prototype.jsでウィンドウを表現 (0)
• prototype.jsでアコーディオン表現 (0)
• JavaScriptでセレクトボックスの連動 (1)

ここ2、3日続いているprototypeベースのUIライブラリシリーズですが、本日は個人的によく使うアコーディオンAccordion v2.0です。やはり大量のコンテンツを1画面で表現するには最適です。どうやらそういう画面を作ることが多いようで、このライブラリは昔から使っていました。マニュアル的サイトを作成することが非常に多い･･･面倒な仕事しか回ってこないようです･･･ああ、これもCakePHPの案件で使用します。

送信者 Blog

タグ

関連する投稿

• 楽天ジャンル検索で動的にセレクトボックス生成 (0)
• prototype.jsでタブメニュー (0)
• prototype.jsでウィンドウを表現 (0)
• JavaScriptでセレクトボックスの連動 (1)
• InPlaceEditorをダブルクリックで使う (0)

モーダル、オーバーレイなどさまざまなウィンドウを表現するため例のごとくいろいろ探しましたところ、jQueryベースのThickboxというライブラリが要件にピッタリでした。しかし例のごとくCakePHPの案件なのでprototypeベースのものを探したところ、Thickboxをprototypeに移植したprototype.js ベースの Thickbox ライブラリ「ProtoThickBox」を公開しましたを見つけました。

送信者 Blog

続きを読む…

タグ

関連する投稿

• 楽天ジャンル検索で動的にセレクトボックス生成 (0)
• prototype.jsでタブメニュー (0)
• prototype.jsでアコーディオン表現 (0)
• jQuery.UI.dialogの中身をAjaxでloadする (0)
• JavaScriptでセレクトボックスの連動 (1)
• InPlaceEditorをダブルクリックで使う (0)

タブメニューで画面を切り替える要件があります。例のごとくCakePHPでの案件に必要なためprototype.jsベースでのライブラリに絞って探したところ、非常にシンプルで短いコードのprototype.js でタブ切り替えが見つかりましたので使用させていただきました。

送信者 Blog

続きを読む…

タグ

関連する投稿

• 楽天ジャンル検索で動的にセレクトボックス生成 (0)
• prototype.jsでウィンドウを表現 (0)
• prototype.jsでアコーディオン表現 (0)
• JavaScriptでセレクトボックスの連動 (1)
• InPlaceEditorをダブルクリックで使う (0)

CakePHPのAjaxヘルパーにEditorというメソッドがあります。文字をクリックしたら編集できるようになるアレです。PHPによる JavaScriptを書かないAjaxの「編集可能なテキスト」が良いサンプルです。これとドラッグ＆ドロップでデータを並び替えるで使っているSortableの両方を実装する要件がありました。つまりドラッグ&ドロップでソートしつつクリックすると文字を編集できるようにするということです。

今回はドラッグ＆ドロップでデータを並び替えるのサンプルコードを基本にしてEditorのコードを付け加えていく形でコードを書きました。

views/fruits/index.thtmlのhiddenの下に以下のコードを追加

<?php e($ajax->editor('edit_' . $data[$model]['id'], 'edit/' . $data[$model]['id'])); ?>

続きを読む…

タグ

関連する投稿

• 楽天ジャンル検索で動的にセレクトボックス生成 (0)
• フォーム送信前にJavaScriptでdisabled解除 (0)
• prototype.jsでタブメニュー (0)
• prototype.jsでウィンドウを表現 (0)
• prototype.jsでアコーディオン表現 (0)
• JavaScriptでセレクトボックスの連動 (1)

JavaScriptで連動する２つのセレクトボックス（セレクトメニュー？）が必要になっていろいろ見たんですが、コードの量、シンプルさからJavaScriptで連動する２つのセレクトメニューを作るを参考にさせていただきました。ただ、このコード間違いが多くてそのままでは動きません。コメントもしたんですが承認いただけないようなのでこちらに書いておきます。

修正した点は

• form1, country, cityはname属性だけではなくid属性も追加
• デフォルトの都市名が表示されない
• その他タイプミスが幾つかありましたが今は修正されている模様

以下が修正したコードです。動作確認済みです。そのまま動きます。
続きを読む…

タグ

関連する投稿

• 楽天ジャンル検索で動的にセレクトボックス生成 (0)
• prototype.jsでタブメニュー (0)
• prototype.jsでウィンドウを表現 (0)
• prototype.jsでアコーディオン表現 (0)
• InPlaceEditorをダブルクリックで使う (0)
• CakePHPでDBデータからセレクトボックス作成 (0)