新規登録画面に、住所の自動入力機能を追加したいです。

Question

前提・実現したいこと

jpostal.jp を使用して住所が自動入力されるように設定したいです。
こちらの記事を参考に、コードを書かせていただきました。
https://hajimeteblog.com/jpostal/
フォームは表示されているのですが、郵便番号を打っても住所が自動入力されず何も起こりません。
検証ツールでエラーメッセージはなく、どこを修正すべきか悩んでおります。
予想される原因などがあれば、ご教示願います。

試したこと

registrations/new.html.erbに追加した記述

 <%= form_with model: @user, url: user_registration_path, id: 'new_user', class: 'new_user', local: true do |f| %>
   <div class="field"> <!--郵便番号-->
     <%= f.label :postal_code %><br />
     <%= f.text_field :postal_code, autofocus: true, class: "postal_code", id: "address_zipcode" %>
   </div>

   <div class="field"><!--都道府県-->
     <%= f.label :prefecture_code %><br>
     <%= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :code, :name, class: "address", id: "user_prefecture_name"%>
   </div>

   <div class="field"><!--市区町村-->
     <%= f.label :city %><br>
     <%= f.text_field :city, autofocus: true, class: "address", id:"address_city" %>
   </div>

   <div class="field"><!--番地-->
     <%= f.label :street %><br>
     <%= f.text_field :street, autofocus: true, class: "address", id: "address_street" %>
   </div>

javascripts.users.coffeeの記述

$ ->
  $("#address_zipcode").jpostal({
    postcode : [ "#address_zipcode" ],
    address  : {
                  "#user_prefecture_name" : "%3",
                  "#address_city"            : "%4%5",
                  "#address_street"          : "%6%7"
                }
  })

javascripts/apprication.js

//= require turbolinks
//= require jquery
//= require rails-ujs
//= require activestorage
//= require bootstrap-sprockets
//= require jquery.jpostal こちらを追加しました
//= require_tree .

javascripts/jquery.jpostal.js
ダウンロードしたファイルを入れました。

補足情報（FW/ツールのバージョンなど）

schema.rbにカラムを追加しました。

 t.integer "prefecture_code"
 t.integer "postal_code"
 t.string "city"
 t.string "street"

user.rb
JpPrefecture導入のために追加しました。

 include JpPrefecture
 jp_prefecture :prefecture_code

 def prefecture_name
   JpPrefecture::Prefecture.find(code: prefecture_code).try(:name)
 end

 def prefecture_name=(prefecture_name)
   self.prefecture_code = JpPrefecture::Prefecture.find(name: prefecture_name).code
 end

gemを追加しました。

gem 'jp_prefecture'

Comments

[m.ts10806]

タグを追加されたほうが良いかと思います。
https://teratail.com/tags/CoffeeScript

あと、デバッグしてください。
エラーなくても想定の場所を通ってなければ何も起きません。

[no1knows]

jQueryは動くことが確認できた状態でしょうか？
またRailsのバージョンは5でしょうか？

[hana_]

タグの追加、検索してみます。ありがとうございます。

[hana_]

jQueryは、使えております。
Rails 5.2.4.4と確認できました。

[no1knows]

一度、jsファイルを直接読み込ませても振る舞いは変わりませんか？
<script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>
また公式と同じ設定になっているでしょうか？
https://github.com/ninton/jquery.jpostal.js/

Answer 1

こちらの記述を入れ替えたところ住所が自動入力されるようになりました。
解決はしたものの、原因が理解できておりません。
こちらの記述が確実な原因かは説明できかねますが、
変更した部分を参考までに載せておきます。

素早いコメントありがとうございます。

修正前のjavascripts/apprication.js

//= require turbolinks
//= require jquery
//= require rails-ujs
//= require activestorage
//= require bootstrap-sprockets
//= require jquery.jpostal 
//= require_tree .

修正後のjavascripts/apprication.js

//= require jquery
//= require rails-ujs
//= require activestorage
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
//= require jquery.jpostal