[Ruby] Ruby on Rails automatic address input implementation method

1 minute read

Introduction

Current version: macOS Catalina 10.15.3

I tried to implement automatic address input with Ruby on Rails. It is described as a memorandum. I hope you find it helpful.

Procedure

(1) First, download the js file (jQuery plugin) from the following. jquery.jpostal.js

(2) Place the downloaded js file in app/assets/javascripts.

(3) After adding the following to the Gemfile, ```$ bundle install

in the terminal.




#### **`Gemfile`**
```ruby

# To be able to use jQuery with Rails
gem'jquery-rails'
# Address function
gem'jp_prefecture'

(4) After adding the following columns to the User model, ```$ rails db:migrate

in the terminal.




#### **` terminal`**
```ruby

rails generate migration AddColumnsToUsers postal_code:string prefecture_code:string address_city:string address_street:string

(5) Add the following to app/models/user.rb to edit the User model

user.rb


  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

(6) Add the following to the view to be displayed (This article is implemented on the new member registration screen by introducing devise) Added description in app/views/devise/registrations/new.html.erb

ruby:new.html.erb



<%= f.label: Zip code %>
<%= f.text_field :postal_code, autocomplete: "postal_code", id: "customer_postal_code" %>

<%= f.label: prefecture %>
<%= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :name, :name, autocomplete: "prefecture_code", id: "customer_prefecture_code" %>

<%= f.label: City %>
<%= f.text_field :address_city, autocomplete: "address_city", id: "customer_address_city" %>

<%= f.label: Town name address %>
<%= f.text_field :address_street, autocomplete: "address_street", id: "customer_address_street" %>

(7) Described in app/assets/javascripts/user.coffee to call the jpostal method.

user.coffee


$ ->
  $("#user_postcode").jpostal({
    postcode: ["#user_postcode" ],
    address :{
                  "#user_prefecture_code" :"%3",
                  "#user_address_city": "%4",
                  "#user_address_street": "%5%6%7"
                }
  })
  # Input item format
# %3 prefectures
# %4 city
# %5 town area
# %6 Oguchi office address
# %7 Name of Oguchi Office

(8) The following additional description in app/controllers/users_controller.rb

users_controller.rb


  private
  def user_params
    params.require(:user).permit(:postcode, :prefecture_code, :address_city, :address_street) # columns that can be saved
  end

After inputting the zip code, the address will be automatically input.

Supplement

If you do not enter the zip code automatically without moving to the screen where you set the automatic address input and reloading it, you could solve it by adding data: {“turbolinks” => false} to the description of the link.

<%= link_to'member registration','/customers/sign_up', data: {"turbolinks" => false} %>

It took about 20 minutes for the first implementation. We hope for your reference.