jQuery Mobileのメールフォームの郵便番号入力で住所自動入力をする。【技術情報】13.09.18

jQueryMobileのメールフォームの住所項目に郵便番号を入力すると都道府県のプルダウンと住所欄を自動入力されるように下記の「AjaxZip 2.0」というajaxを使わせていただいた。
http://www.kawa.net/works/ajax/ajaxzip2/ajaxzip2.html

HTMLヘッダーで必要なJSファイル「ajaxzip2.js」を1つ(「prototype.js」または「jquery.js」を別途読み込む。どちらでも動くのが便利)読み込み、郵便番号のテキストボックスを修正するだけという簡単な実装方法なのがとてもいいです。
ただ、jQuery Mobileのメールフォームに実装しようとすると郵便番号を入力しても都道府県がプルダウンの場合、表示が変化しない。内部的にはセットされているようだが、表示が変わらないのは気持ち悪い。
これはjQuery MobileのスキンがHTML読み込み時に適用されているためで郵便番号入力時に一度、都道府県のプルダウンをリフレッシュする必要がある。

方法は簡単。
都道府県のテキストボックスのidが「zip」、都道府県のプルダウンのidが「pref」とすると、HTMLヘッダー、もしくは外部JSファイルとして下記を追加してください。

<script type="text/javascript">
$(function(){
    $("#zip").blur(function(){
        $('#pref').selectmenu('refresh',true);
    });
});
</script>

「blur」はフォーカスが離れた時、つまり都道府県のテキストボックスからフォーカスが離れた時に都道府県プルダウンをリフレッシュしています。「AjaxZip 2.0」の設定(郵便番号テキストボックスの「AjaxZip2.zip2addr」の引数)で住所のテキストボックスにフォーカスが移動するように設定してください。

このエントリーをはてなブックマークに追加
「WEBaseとつながろう!」LINEでマーケティング情報を定期的に発信していきます。集客に興味がある方は、友達登録お願い致します。
Contents
お知らせ 一覧
使命は集客、戦略的WEB集客サポート「WEBコンサルティング」
お試しWEBコンサルティング
完全成果報酬型SEO対策「インジーニアスSEO」
戦略的ホームページ制作・リニューアル
「WEBaseとつながろう!」LINEでマーケティング情報を定期的に発信していきます。集客に興味がある方は、友達登録お願い致します。
ページTOPへ