前提・実現したいこと
現在、 Railsで、jp_prefectureとjpostal.jpを使って郵便番号から住所を自動入力の実装を進めているのですが、なかなか自動入力ができない状況が続いています。
ぜひ先輩方のアドバイスをいただければと思い質問させていただきました。
現在のコードを記載します。※jpostal.jpはgithubより導入済みです。
●views/layouts/application.html.erb
<!DOCTYPE html> <html> <head> <title>Localshopping</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <script src="app.js"></script> </head> <body> <%= yield %> </body> </html>
●views/users/registrations/new.html.erb
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <div class="field"> <%= f.label :postcode %><br /> <%= f.text_field :postcode, autocomplete: "postcode",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, { prompt: '選択してください' }, class: "address", id: "address_prefecture_name" %> </div> <div class="field"> <%= f.label :address_city %><br /> <%= f.text_field :address_city, autocomplete: "address_city", class: "address", id: "address_city" %> </div> <div class="field"> <%= f.label :address_street %><br /> <%= f.text_field :address_street, autocomplete: "address_street", class: "address", id: "address_street" %> </div> <div class="field"> <%= f.label :address_building %><br /> <%= f.text_field :address_building, autocomplete: "address_building" %> </div>
●app/assets/javascript/application.js
require("@rails/ujs").start() #ここから4行はdevise設定時に自動で入ったものです。 require("turbolinks").start() require("@rails/activestorage").start() require("channels") // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true) //= require jquery //= require rails-ujs //= require activestorage //= require jquery_ujs //= require jquery.jpostal //= require turbolinks //= require bootstrap-sprockets //= require_tree .
●app/assets/javascript/user.coffee
$ -> $("#address_zipcode").jpostal({ postcode : [ "#address_zipcode" ], address : { "#address_prefecture_name" : "%3", "#address_city" : "%4%5", "#address_street" : "%6%7" } })
●app/models/user.rb
class User < ApplicationRecord include JpPrefecture jp_prefecture :prefecture_code#, method_name: :pref devise :database_authenticatable, :registerable, :recoverable, :rememberable, :trackable, :validatable, :confirmable 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 end
●/app/controllers/application_controller.rb
class ApplicationController < ActionController::Base protect_from_forgery with: :exception before_action :configure_permitted_parameters, if: :devise_controller? protected def configure_permitted_parameters added_attrs = [ :email, :first_name, :last_name, :phone_number, :postcode, :prefecture_code, :address_city, :address_street, :address_building, :password, :password_confirmation, :number_of_store ] devise_parameter_sanitizer.permit :sign_up, keys: added_attrs devise_parameter_sanitizer.permit :account_update, keys: added_attrs devise_parameter_sanitizer.permit :sign_in, keys: added_attrs end end
一通り設定をし、現状上記コードのような形で進めています。
gem 'jp_prefecture' gem 'jquery-rails'等必要なgemもインストール済です。
「user.coffee 」の連携できていないのが原因なのではないかと感じています。
ぜひアドバイスを頂戴できればと思います。
何卒よろしくお願い申し上げます。
あなたの回答
tips
プレビュー