@kamishubaizumoposted at 2023-03-31

【rails6】住所自動入力のjpostal.jsがコンソールエラーになる。

Q&A

Rails jQuery Gem

バージョン

ruby 3.1.2
rails 6.1.7.3

だいぶ参考にした記事

解決したいこと

jquery.jpostal.js　という、自動住所入力のgemがimportで読み込めません。
scriptタグでもローカルから読み込めません。

application.html.erb

#読み込めるけど、根本的な解決はできない
<script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>

現状は、こうやって記述するしか実装できません。
これでは、元のサイトが使えなくなった時、こちらも使えなくなってしまうので、
ローカルフォルダに入れてあるjquery.jpostal.jsを読み込みたいです

発生している問題・エラー

検証ツールのコンソール見ると

Uncaught TypeError: $(...).jpostal is not a function
    at HTMLDocument.<anonymous> (application.js:29:1)
    at HTMLDocument.dispatch (event.js:309:1)
    at elemData.handle (event.js:134:1)
    at ./node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:68:1)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:885:1)
    at r.pageLoaded (turbolinks.js:839:1)
    at turbolinks.js:765:1
(anonymous) @ application.js:29
dispatch @ event.js:309
elemData.handle @ event.js:134
./node_modules/turbolinks/dist/turbolinks.js.e.dispatch @ turbolinks.js:68
r.notifyApplicationAfterPageLoad @ turbolinks.js:885
r.pageLoaded @ turbolinks.js:839
(anonymous) @ turbolinks.js:765

というエラーが発生します

試したこと

app/javascript/jquery.jpostal.js

これを読み込みたい

application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

import "jquery";
import "popper.js";
import "bootstrap";
import '@fortawesome/fontawesome-free/js/all';
import "../stylesheets/application.scss";

# 末尾に.jsを入れてもエラー
import "jquery.jpostal"

Rails.start()
Turbolinks.start()
ActiveStorage.start()


jQuery(document).on("turbolinks:load", function () {
  $('#customer_postcode').jpostal({
    postcode: [
      // 取得する郵便番号のテキストボックスをidで指定
      '#customer_postcode'
    ],
    address: {
      // %3 => 都道府県、 %4 => 市区町村 %5 => 町域 %6 => 番地 %7 => 名称
      // それぞれを表示するコントロールをidで指定
      "#customer_prefecture_code": "%3",
      "#customer_address_city": "%4%5",
      "#customer_address_street": "%6%7",
    }
  });
});

views/layouts/application.html.erb

:
:
:
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

#読み込めるので、現状はこちらで実装している。
<script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>

以下は、試したことです。
#読み込めない。根本的な原因の解決をしたい。
<script type="text/javascript" src="javascript/jquery.jpostal.js"></script>
<script type="text/javascript" src="../javascript/jquery.jpostal.js"></script>

繰り返しになりますが、ローカルのjsファイルを読み込みたいです。
turblinkでエラーが起こってるようなのですが、chatGPTに聞いても解決しませんでした。
なぜローカルだとエラーが起きて、インターネット上のjsだとエラーが起きないのかがわかりません。

ご助力の程、よろしくお願いします。

Are you sure you want to delete the question?