AjaxZip3が動かない！【解決済み】WordPress+Contact Form 7での使用とGitHubへの移行
Google Code のサービス廃止によって WordPress + Contact Form 7 で使用していた AjaxZip3 が動かなくなった、との相談がありまして。
結論から言うと、２つ作業が必要です。
１）公式サイトの案内に従ってAjaxZip3本体のURL変更
以下のコード、[code lang=”js”] <script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
[/code]
を
[code lang=”js”] <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>[/code]
に変更っと。
２）Contact Form 7 で使う為の jQuery呼び出し部分も変更
公式サイトのサンプルでは <input> タグ内に onKeyUpのイベントハンドラ突っ込んでるんですが、Contact Form 7 では、この設定が出来ないみたい。
で、jQueryを使って・・となる訳ですが、今回のGitHub移行に伴って jQuery 側の設定も少々変更が必要です。
どっかにこんな感じのコードが入ってると思うので、
[code lang=”js”] jQuery(function(){AjaxZip3.JSONDATA = "https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/zipdata";
jQuery(‘#your-zip’).keyup(function(event){
AjaxZip3.zip2addr(this,”,’your-pref’,’your-addr’);
});
jQuery(‘#ca-your-zip’).keyup(function(event){
AjaxZip3.zip2addr(this,”,’ca-your-pref’,’ca-your-addr’);
});
})
[/code]
JSONDATAの取得URLを変更します。（↓2行目のURLだけ変更してます。）
[code lang=”js” highlight=”2″] jQuery(function(){AjaxZip3.JSONDATA = "https://yubinbango.github.io/yubinbango-data/data";
jQuery(‘#your-zip’).keyup(function(event){
AjaxZip3.zip2addr(this,”,’your-pref’,’your-addr’);
});
jQuery(‘#ca-your-zip’).keyup(function(event){
AjaxZip3.zip2addr(this,”,’ca-your-pref’,’ca-your-addr’);
});
})
[/code]
これで動くようになりました。