アクセシビリティ
デベロッパーリソース

目次

  1. はじめに
  2. 第３回の完成画面
  3. 検索結果を表示させる
  4. Spryで表示効果をセットしよう！
  5. プルダウンリストで選択された情報をチェックする
  6. さらにリッチに！
  7. もっと学ぶには

AIRチュートリアル Dreamweaver 第３回　リッチなUIを作ってみよう！～ Spryエフェクトと入力チェックを利用する～

検索結果を表示させる

現在、固定の条件を用いて「じゃらん」から検索表示していますが、検索エリアが出来上がりましたので、プルダウンリストからホテルの種別を選択して情報を検索できるようにしてみましょう。

処理の流れとしては

  • プルダウンリストからホテルの種別を選択する
  • 「SEARCH」ボタンをクリックして、「じゃらん」から情報を取得
  • 一覧および詳細の情報を更新表示
となります。

プルダウンリストから選ばれた値を、取得するためにスクリプトを記述します。（本チュートリアルではKeyの値を伏せてあります。このままでは動作しませんので、コーディングする際にはKeyの値を第２回のチュートリアルで取得した値に置き換えてください。）

【ページ先頭のscriptタグを以下の内容に更新してください】

<script type="text/javascript">
<!--
var dsHotels = new Spry.Data.XMLDataSet("", "Results/Hotel");
function get_option_val ( elem ) {
   for( var i=0; i<elem.options.length; i++ ) {
       if ( elem.options[i].selected ) return elem.options[i].value;
   }
};
function get_option_selected ( form ) {
	var elem = document.getElementById('hotel_type2');
	var val = get_option_val(elem);
	var url = "http://jws.jalan.net/APILite/HotelSearch/V1/?key=**************&pref=130000&h_type=" + val;
	dsHotels.setURL(url);
	dsHotels.loadData();
	return false;
}
//-->
</script>

【コードビュー】

【コードビュー】

formタグのonsubmitイベントを追加します。

【formタグを以下の内容に更新してください】

<form id="form1" name="form1" method="post" onsubmit="return get_option_selected(this);">

【コードビュー】

【コードビュー】

検索した内容で画面表示させるためSpry.Data.XMLDataSetの初期として値を固定していたものを空欄としています。「SEARCH」ボタンが押されて(submitされて)から、プルダウンリストで選択された値を調べ、DataSetにその値をパラメータとして追加してセットします。そして新しいデータをロードさせています。
formにはsubmitしてからプルダウンの内容を取り出し、自身のプログラム内でデータ処理するためにonsubmitイベントにスクリプトを追加しています。

では、ここまでの内容でAIRのプレビューをしてみます。
プルダウンリストから、「貸別荘」を選んで「SEARCH」ボタンをクリックしてください。
データが１件だけ表示されます。（2008/4/15時点の登録データ）

コードビュー2

条件検索により表示する情報も変わるようになり、だいぶアプリケーションとして形が出来上がってきました。ただ表示に関してはちょっとおとなしいので、表示効果を追加して見栄えを改善していくことにします。

ページ 3 / 5
前のページ
次のページ