AjaxZip3が動かない！【解決済み】WordPress+Contact Form 7での使用とGitHubへの移行

2015/06/172018/01/31

AjaxZip3が動かない 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]

これで動くようになりました。