🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Devise

Deviseとは、Ruby-on-Railsの認証機能を追加するプラグインです。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

955閲覧

JpPrefectureとjpostal.jsで、郵便番号の住所入力したい

Ryo-EAST

総合スコア33

Devise

Deviseとは、Ruby-on-Railsの認証機能を追加するプラグインです。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/03/08 17:30

編集2021/03/09 12:32

前提・実現したいこと

https://hajimeteblog.com/jpostal/
このサイトを元に
devise導入後のユーザー新規登録画面で
(通常使用は問題なく動作しています)
郵便番号から自動入力で住所を入力したいのですが
入力しても何も動作しない状態です

色々と試してみましたが解決の糸口が見えない状態で
助言をお願いしたいです。

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

発生しているエラーメッセージはありません

該当のソースコード

haml

1/app/views/users/registrations/new.html.haml 2 3 .row 4 .field 5 = f.label :postal_code 6 %br/ 7 = f.text_field :postal_code, autofocus: true, id: "user_postal_code" 8 .field 9 = f.label :prefecture_code 10 %br/ 11 = f.collection_select(:prefecture_code, JpPrefecture::Prefecture.all, :code, :name, {}, {class:"prefecture-select", id: "user_prefecture_code"}) 12 .field 13 = f.label :city 14 %br/ 15 = f.text_field :city, autofocus: true, id: "user_city" 16 .field 17 = f.label :street 18 %br/ 19 = f.text_field :street, autofocus: true, id: "user_street"

coffee

1/app/javascript/packs/users.coffee → /app/javascript/users.coffeeに変更 2 3$ -> 4 $("#user_postal_code").jpostal({ 5 postcode : [ "#user_postal_code" ], 6 address : { 7 "#user_prefecture_code" : "%3", 8 "#user_city" : "%4", 9 "#user_street" : "%5%6%7" 10 } 11 })

javascript

1/app/javascript/packs/application.js →/app/javascript/application.jsに変更 2※は考えを示すために付け足した物です 3 4require("@rails/ujs").start() 5require("turbolinks").start() 6require("@rails/activestorage").start() 7require("channels") 8require('jquery') 9require("../jquery.jpostal") ※上部にも「jquery.jpostal」を追加 10require('../test')       ※テストで簡単なコードは動作(マウスが乗ったら色を文字色を変化) 11 12//= require turbolinks        ※一番上に置くべき 13//= require jquery3          ※turbolinksより下 14//= require jquery_ujs 15//= require popper 16//= require bootstrap-sprockets 17//= require jquery.jpostal      ※今回導入(treeより上) 18//= require_tree .          ※一番下

ruby

1/app/models/user.rb 2 3 include JpPrefecture 4 jp_prefecture :prefecture_code 5 6 def prefecture_name 7 JpPrefecture::Prefecture.find(code: prefecture_code).try(:name) 8 end 9 10 def prefecture_name=(prefecture_name) 11 self.prefecture_code = JpPrefecture::Prefecture.find(name: prefecture_name).code 12 end 13

試したこと

https://teratail.com/questions/299691
を元に

  • フォルダ、カラム名が同じになる様に揃えた
  • application.jsの順番を変更した
  • 自動でもidが付与されていたが、自分で指定した
  • users.coffeeを/app/assets/javascriptsに移動してみた

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

rails (6.0.3.5)
jp_prefecture (1.0.0)
jquery-rails (4.4.0)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

元のテンプレートはerbを使っているようですが、それをhamlに書き換えた際に忘れてるプロパティないですかね?

f.text_field あたりでクラス名が抜け落ちてる気がしますが…。ブラウザのコンソールなどを見て、元のerbとプロパティの記述が一致しているか確認した方がいいですよ。

要は連動プルダウンなので、クラス名を合わせておかないと動かない気がします。

投稿2021/03/24 09:36

編集2021/03/24 09:38
FKM

総合スコア3647

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問