Ruby on rails javascript 住所：郵便番号自動検索動作しない場合がある問題を解決したい

前提・実現したいこと

https://remonote.jp/rails-jp_prefecture-jppostal
を参考にし全く同じものを作成しました。
郵便番号を入力することで自動で県以下を取得してくれるjsプラグインを利用するチュートリアルです。
発生している問題に対して、別ページから遷移した場合でも正常に動作するようにしたいです。

発生している問題・エラーメッセージ

発生している問題は　/users/new に別ページから遷移したときに
自動で入力する機能が働かないことです。
別ページから遷移した後にその場でページの更新をしてあげることで正常に動くようになります。

該当のソースコード

application.js

js
1// This is a manifest file that'll be compiled into application.js, which will include all the files
2// listed below.
3//
4// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
5// vendor/assets/javascripts directory can be referenced here using a relative path.
6//
7// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
8// compiled file. JavaScript code in this file should be added after the last require_* statement.
9//
10// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
11// about supported directives.
12//
13//= require rails-ujs
14//= require activestorage
15//= require jquery
16//= require turbolinks
17//= require_tree .

users.coffee

coffee
1# Place all the behaviors and hooks related to the matching controller here.
2# All this logic will automatically be available in application.js.
3# You can use CoffeeScript in this file: http://coffeescript.org/
4$ ->
5  $("#user_postcode").jpostal({
6    postcode : [ "#user_postcode" ],
7    address  : {
8                  "#user_prefecture_code" : "%3",
9                  "#user_address_city"            : "%4",
10                  "#user_address_street"          : "%5%6%7"
11                }
12  })

users_controller.rb

rb
1class UsersController < ApplicationController
2  before_action :set_user, only: [:show, :edit, :update, :destroy]
3
4  # GET /users
5  # GET /users.json
6  def index
7    @users = User.all
8  end
9
10  # GET /users/1
11  # GET /users/1.json
12  def show
13  end
14
15  # GET /users/new
16  def new
17    @user = User.new
18  end
19
20  # GET /users/1/edit
21  def edit
22  end
23
24  # POST /users
25  # POST /users.json
26  def create
27    @user = User.new(user_params)
28
29    respond_to do |format|
30      if @user.save
31        format.html { redirect_to @user, notice: 'User was successfully created.' }
32        format.json { render :show, status: :created, location: @user }
33      else
34        format.html { render :new }
35        format.json { render json: @user.errors, status: :unprocessable_entity }
36      end
37    end
38  end
39
40  # PATCH/PUT /users/1
41  # PATCH/PUT /users/1.json
42  def update
43    respond_to do |format|
44      if @user.update(user_params)
45        format.html { redirect_to @user, notice: 'User was successfully updated.' }
46        format.json { render :show, status: :ok, location: @user }
47      else
48        format.html { render :edit }
49        format.json { render json: @user.errors, status: :unprocessable_entity }
50      end
51    end
52  end
53
54  # DELETE /users/1
55  # DELETE /users/1.json
56  def destroy
57    @user.destroy
58    respond_to do |format|
59      format.html { redirect_to users_url, notice: 'User was successfully destroyed.' }
60      format.json { head :no_content }
61    end
62  end
63
64  private
65    # Use callbacks to share common setup or constraints between actions.
66    def set_user
67      @user = User.find(params[:id])
68    end
69
70    # Never trust parameters from the scary internet, only allow the white list through.
71    def user_params
72      params.fetch(:user, {})
73    end
74end

application.html.erb

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <title>Postcode</title>
6  <%= csrf_meta_tags %>
7  <%= csp_meta_tag %>
8
9  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
10  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
11  <script src="jquery-3.3.1.min.js"></script>
12  <script src="app.js"></script>
13</head>
14
15<body>
16  <%= yield %>
17</body>
18
19</html>

_form.html.erb

HTML
1<%= simple_form_for @user do |f| %>
2
3  <%= f.input :postcode %>
4  <%= f.input :prefecture_code, collection: JpPrefecture::Prefecture.all, :value_method => :name, include_blank: '都道府県' %>
5  <%= f.input :address_city %>
6  <%= f.input :address_street %>
7  <%= f.input :address_building %>
8  <%= f.button :submit %>
9
10<% end %>

html
1<h1>New User</h1>
2
3<%= render 'form', user: @user %>
4
5<%= link_to 'Back', users_path %>
6

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

ruby
Ruby on Rails 5.2.2
jquery
javascript
jp_prefecture
jquery.jpostal.js

行動規範の内容に同意します

回答1件

ベストアンサー

$(document).on 'turbolinks:load', ->
上記を加えて

$(document).on 'turbolinks:load', ->
$("#user_postcode").jpostal({
postcode : [ "#user_postcode" ],
address : {
"#user_prefecture_code" : "%3",
"#user_address_city" : "%4",
"#user_address_street" : "%5%6%7"
}
})

としてみてください。
https://qiita.com/hiroyayamamo/items/b258acbaa089d9482c8a

投稿2019/03/07 15:40

編集2019/03/07 15:41

yuukihayashi

総合スコア147

gbp1th

2019/03/07 16:03

$(document).on 'turbolinks:load', -> をusers.coffeに追加しました。 ``` # Place all the behaviors and hooks related to the matching controller here. # All this logic will automatically be available in application.js. # You can use CoffeeScript in this file: http://coffeescript.org/ $ -> $(document).on 'turbolinks:load', -> $("#user_postcode").jpostal({ postcode : [ "#user_postcode" ], address : { "#user_prefecture_code" : "%3", "#user_address_city" : "%4", "#user_address_street" : "%5%6%7" } }) ``` この様になっています。 application.js内にも//= require turbolinksの記載がありますが、問題が改善しません。。。 Rails 5.2.2を使用しております。

yuukihayashi

2019/03/08 01:39 編集

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <script src="jquery-3.3.1.min.js"></script> <script src="app.js"></script> この部分の <script src="jquery-3.3.1.min.js"></script> を <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>より前に記述してみてください。参考 https://qiita.com/keiy121/items/d1880ff2d0de444458c7 上記で動かない場合は、 <script src="jquery-3.3.1.min.js"></script>の記述自体を削除してみてください。環境を再現しましたが、jquery-railsを入れているので上記なくても動くかと思います。

gbp1th

2019/03/08 07:49 編集

ご回答ありがとうございます。現在出先におりますゆえ、時間ができた際に修正し確認をしてみます。記述の順番により動作が変わる可能性があるのですね。そのあたりのルールはまだ理解できていないため、大変助かります。試すことが出来るのが遅くなってしまうため、一旦コチラのコメントにてお礼を言わせてください。

行動規範の内容に同意します