天は自ら助くる者を助く
以前prototype.jsとかを使って郵便番号から住所を検索して表示する
ライブラリを使っていた事があったけどjQueryでもそういったものがないのか
調べてみたらあった。
Postal Search Ajax API チュートリアル
ここが素晴らしい。
郵便番号と住所のデータベースは Postal Search APIs & Solutions のサーバで管理するため、あなたの WEB サーバに データを格納したり、最新データを維持する必要はありません。
但し利用に当たってはPostal Search APIs & Solutions 利用規約をちゃんと守りましょう。
非常識なアクセスしないようにしないとね。
使い方は簡単で「郵便番号から住所を検索する #1」みればわかると思う。
因みに以前利用させてもらっていたライブラリはこちら。
こちらもjQueryにも対応されていたみたいです。
あっajaxzip3っていうのもあったんだ・・・。気付かなかった。。
jQueryでgetメソッドを利用した際にIEでキャッシュされてしまい内容が更新されなかったのでメモ。
$.ajaxSetup() メソッドでキャッシュしないように指定します
$.ajaxSetup({
cache: false
});
$("#target_ajax_load").load("hello.html");
jQueryの実際のサンプルコードがある分かりやすいサイトをメモしておく。
少しのコードで実装可能な20のjQuery小技集(webクリエーターボックス)
プラグイン無しでjQueryだけの小技が紹介されています。なによりサイトが綺麗だし見やすい。
Index of Semooh jQuery Sample Site(jquery sample)
74のサンプルが紹介されています。こちらはプラグインを利用しているものも含みます。
実際にその場で動作を確かめられる上に設定値を変更したりできる。
JavaScript + Ajax + jQuery 実践サンプル集
とにかく沢山のサンプルがある。。
ｊQueryってサンプル見てるだけでなんか楽しい。
さて今日は深夜作業なんでこれくらいで。。（ネタが無いだけ）
前のエントリでdefaultValueのことを書いたけどIEで動かなかった・・・。
とりあえず試したのはIE8
HTML部分はこんな感じ
<input type="hidden" value="" name="back_id" id="back_design_no" />
以前書いたIEで動かない例
var selected_id = 'hogehoge';
$("#back_design_no").attr("defaultValue", selected_id);
こう書いたら動いた
var selected_id = 'hogehoge';
$("#back_design_no").attr({"value": selected_id});
他にもIEで動かない書き方があることを知った。。。
参考
jQuery が IE でうごかねぇーーー、って思ったので、メモっとく。
console.logで動かないとか言ったことあるなーｗ
jQueryのlive関数で指定できるイベントを勘違いしていたのでメモ。
jQuery 1.3より実装。
イベントに対してハンドラを登録します。
登録されたイベントは、現在および将来的にも、セレクタにマッチする全ての要素に適用されます。
カスタムイベントに対してbindすることも可能です。
この関数で指定できるイベントは以下
ちょっとはまったので記録
以下のようにvalue値がすでに設定されている場合には
<input type="hidden" name="hoge" value="moge" id="fuga"/>
以下のようにvalで値を詰めてもvalueの値が変わらなかった。
$("#fuga").val('buzz');
以下のようにするとできた。
$("#fuga")..attr("defaultValue", 'buzz')
defaultvalue属性を知らなかった・・・。
とりあえず今日やったことをば。
jQueryのtoggleで表示、非表示する例。
これを↓
こうしたりする↓
※モザイクはなんとなく。
HTMLのソースはこれ
<p id="toggle_bar" class="tl"><span id="icon" class="strong fonts-02">＋</span><a href="#">××××××××××××××××××××××</a></p> <div id="search_area" class="search-select clearfix"> <ul> <li><input id="1" class="check01" name="tag" type="checkbox" value="1" /><label for="1">××××××</label></li> <li><input id="2" class="check01" name="tag" type="checkbox" value="2" /><label for="2">××××××</label></li> <li><input id="3" class="check01" name="tag" type="checkbox" value="3" /><label for="3">××××××</label></li> <li><input id="4" class="check01" name="tag" type="checkbox" value="4" /><label for="4">××××××</label></li> <li><input id="5" class="check01" name="tag" type="checkbox" value="5" /><label for="5">××××××</label></li> <li><input id="6" class="check01" name="tag" type="checkbox" value="6" /><label for="6">××××××</label></li> <li><input id="7" class="check01" name="tag" type="checkbox" value="7" /><label for="7">××××××</label></li> <li><input id="8" class="check01" name="tag" type="checkbox" value="8" /><label for="8">××××××</label></li> <li><input id="9" class="check01" name="tag" type="checkbox" value="9" /><label for="9">××××××</label></li> <li><input id="10" class="check01" name="tag" type="checkbox" value="10" /><label for="10">××××××</label></li> <li><input id="11" class="check01" name="tag" type="checkbox" value="11" /><label for="11">××××××</label></li> <li><input id="12" class="check01" name="tag" type="checkbox" value="12" /><label for="12">××××××</label></li> <li><input id="13" class="check01" name="tag" type="checkbox" value="13" /><label for="13">××××××</label></li> <li><input id="21" class="check01" name="tag" type="checkbox" value="21" /><label for="21">××××××</label></li> <li><input id="30" class="check01" name="tag" type="checkbox" value="30" /><label for="30">××××××</label></li> <li><input id="31" class="check01" name="tag" type="checkbox" value="31" /><label for="31">××××××</label></li> <li><input id="34" class="check01" name="tag" type="checkbox" value="34" /><label for="34">××××××</label></li> <li><input id="35" class="check01" name="tag" type="checkbox" value="35" /><label for="35">××××××</label></li> <li><input id="36" class="check01" name="tag" type="checkbox" value="36" /><label for="36">××××××</label></li> <li><input id="38" class="check01" name="tag" type="checkbox" value="38" /><label for="38">××××××</label></li> </ul> </div>
jsはこれ
$("#search_area").css("display", "none");
$('#toggle_bar').click(function(){
$('#search_area').toggle();
var lab = $('#icon').html();
if(lab == '－') {
$('#icon').html('＋');
} else {
$('#icon').html('－');
}
});
簡単っすな。。表示を無理矢理変えてるところがイケてないけど。。
参考
toggle()
仕事でcheckboxの値を復元する必要があったのでｊQueryでやってみた。
とりあえずコード
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var tags = ['1', '2', '3']; // 復元する値の例
$('#main :checkbox').each(function(){
if($.inArray($(this).val(), tags) > -1){
$(this).attr("checked", "checked");
}
});
});
</script>
HTML部分（大体こんな感じ）
<div id="main">
<input type="checkbox" name="sample" value="1" />hoge
<input type="checkbox" name="sample" value="2" />moge
<input type="checkbox" name="sample" value="3" />fuga
<input type="checkbox" name="sample" value="4" />fuzz
<input type="checkbox" name="sample" value="5" />buzz
</div>
この場合だと「hoge」、「moge」、「fuga」にチェックが入る想定。
$(‘#main :checkbox’)でcheckboxをさらって一つずつeachで処理。
その際順番に処理されるcheckboxの値がtags配列（復元対象）中に
あるかどうかを$.inArray($(this).val(), tags)でチェックし、「-1」（存在しない）
以外であれば復元するという感じ。
とりあえずできたけどこれがいいのかどうか・・・。
たまに仕事で使ってたけどちゃんとわかってないのでやってみる。
今後結構使うことになりそうなので今のうちに。
特に今回はたいしたことじゃない。。
結局セレクタを使いこなすっていうのが大事。
