Ruby on RailsでJavaScriptの非同期通信を特定のビューファイルに適用させたいです

Question

前提・実現したいこと

Ruby on RailsでJavaScriptを非同期で実装し他ので特定のビューファイルで反映をさせたい。
現在は、ビューファイルを開いて１回目だと非同期通信が起こらない　→　ブラウザをリロードすると非同期通信が正常に働き、解決する。

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

JavaScriptで非同期のコードを書いた後に、デベロッパーツールのConsoleで入力を確認。
すると、
Uncaught TypeError: Cannot read property 'addEventListener' of null
    at price (price.js:5)
というエラーが発生。一度、ブラウザをリロードすると、エラーが消え、JavaScriptの非同期通信が利用できる。
しかし、毎回リロードしないと非同期通信が起きないのでこのエラーを解決したい。

該当のソースコード

function price() {
  const market_price = document.getElementById("item-price");
  const add_tax = document.getElementById("add-tax-price");
  const profit = document.getElementById("profit");
  market_price.addEventListener("keyup", () => {
    const selling_price = market_price.value;
    let fee = selling_price * 0.1
    let gains = selling_price * 0.9
    add_tax.textContent = fee;
    profit.textContent = gains;
  });
}
window.addEventListener("load", price);

変更したJavaScriptのコード

function price() {
  const market_price = document.getElementById("item-price");
  const add_tax = document.getElementById("add-tax-price");
  const profit = document.getElementById("profit");
  const XHR = new XMLHttpRequest();
  XMLHttpRequest.open("POST", `/items/${current_user_id}`, true);
  XHR.responseType = "json";
  market_price.addEventListener("keyup", () => {
    const selling_price = market_price.value;
    let fee = selling_price * 0.1
    let gains = selling_price * 0.9
    add_tax.textContent = fee;
    profit.textContent = gains;
  });
}
window.addEventListener("load", price);


```### 該当のソースコード

```html.erb

<div class="items-sell-contents">
  <header class="items-sell-header">
    <%= link_to image_tag('furima-logo-color.png' , size: '185x50'), "/" %>

  </header>
  <div class="items-sell-main">
    <h2 class="items-sell-title">商品の情報を入力</h2>
    <%= form_with model: @items, local: true do |f| %>

    <%= render 'shared/error_messages', model: f.object %>

    <%# 出品画像 %>
    <div class="img-upload">
      <div class="weight-bold-text">
        出品画像
        <span class="indispensable">必須</span>
      </div>
      <div class="click-upload">
        <p>
          クリックしてファイルをアップロード
        </p>
        <%= f.file_field :image, id:"item-image" %>
      </div>
    </div>
    <%# /出品画像 %>
    <%# 商品名と商品説明 %>
    <div class="new-items">
      <div class="weight-bold-text">
        商品名
        <span class="indispensable">必須</span>
      </div>
      <%= f.text_area :name, class:"items-text", id:"item-name", placeholder:"商品名（必須 40文字まで)", maxlength:"40" %>
      <div class="items-explain">
        <div class="weight-bold-text">
          商品の説明
          <span class="indispensable">必須</span>
        </div>
        <%= f.text_area :discription, class:"items-text", id:"item-info", placeholder:"商品の説明（必須 1,000文字まで）（色、素材、重さ、定価、注意点など）例）2010年頃に1万円で購入したジャケットです。ライトグレーで傷はありません。あわせやすいのでおすすめです。" ,rows:"7" ,maxlength:"1000" %>
      </div>
    </div>
    <%# /商品名と商品説明 %>

    <%# 商品の詳細 %>
    <div class="items-detail">
      <div class="weight-bold-text">商品の詳細</div>
      <div class="form">
        <div class="weight-bold-text">
          カテゴリー
          <span class="indispensable">必須</span>
        </div>
        <%= f.collection_select(:category_id, Category.all, :id, :name, {}, {class:"select-box", id:"item-category"}) %>
        <div class="weight-bold-text">
          商品の状態
          <span class="indispensable">必須</span>
        </div>
        <%= f.collection_select(:condition_id, Condition.all, :id, :name, {}, {class:"select-box", id:"item-sales-status"}) %>
      </div>
    </div>
    <%# /商品の詳細 %>

    <%# 配送について %>
    <div class="items-detail">
      <div class="weight-bold-text question-text">
        <span>配送について</span>
        <a class="question" href="#">?</a>
      </div>
      <div class="form">
        <div class="weight-bold-text">
          配送料の負担
          <span class="indispensable">必須</span>
        </div>
        <%= f.collection_select(:delivery_fee_id, DeliveryFee.all, :id, :name, {}, {class:"select-box", id:"item-shipping-fee-status"}) %>
        <div class="weight-bold-text">
          発送元の地域
          <span class="indispensable">必須</span>
        </div>
        <%= f.collection_select(:area_id, Area.all, :id, :name, {}, {class:"select-box", id:"item-prefecture"}) %>
        <div class="weight-bold-text">
          発送までの日数
          <span class="indispensable">必須</span>
        </div>
        <%= f.collection_select(:ship_days_id, ShipDay.all, :id, :name, {}, {class:"select-box", id:"item-scheduled-delivery"}) %>
      </div>
    </div>
    <%# /配送について %>

    <%# 販売価格 %>
    <div class="sell-price">
      <div class="weight-bold-text question-text">
        <span>販売価格<br>(¥300〜9,999,999)</span>
        <a class="question" href="#">?</a>
      </div>
      <div>
        <div class="price-content">
          <div class="price-text">
            <span>価格</span>
            <span class="indispensable">必須</span>
          </div>
          <span class="sell-yen">¥</span>
          <%= f.text_field :price, class:"price-input", id:"item-price", placeholder:"例）300" %>
        </div>
        <div class="price-content">
          <span>販売手数料 (10%)</span>
          <span>
            <span id='add-tax-price'></span>円
          </span>
        </div>
        <div class="price-content">
          <span>販売利益</span>
          <span>
            <span id='profit'></span>円
        </div>
        </span>
      </div>
    </div>
    <%# /販売価格 %>

    <%# 注意書き %>
    <div class="caution">
      <p class="sentence">
        <a href="#">禁止されている出品、</a>
        <a href="#">行為</a>
        を必ずご確認ください。
      </p>
      <p class="sentence">
        またブランド品でシリアルナンバー等がある場合はご記載ください。
        <a href="#">偽ブランドの販売</a>
        は犯罪であり処罰される可能性があります。
      </p>
      <p class="sentence">
        また、出品をもちまして
        <a href="#">加盟店規約</a>
        に同意したことになります。
      </p>
    </div>
    <%# /注意書き %>
    <%# 下部ボタン %>
    <div class="sell-btn-contents">
      <%= f.submit "出品する" ,class:"sell-btn" %>
      <%=link_to 'もどる', root_path, class:"back-btn" %>
    </div>
    <%# /下部ボタン %>
  </div>
  <% end %>

  <footer class="items-sell-footer">
    <ul class="menu">
      <li><a href="#">プライバシーポリシー</a></li>
      <li><a href="#">フリマ利用規約</a></li>
      <li><a href="#">特定商取引に関する表記</a></li>
    </ul>
    <%= link_to image_tag('furima-logo-color.png' , size: '185x50'), "/" %>
    <p class="inc">
      ©︎Furima,Inc.
    </p>
  </footer>
</div>

試したこと

JavaScriptのコードというより、読み込みがうまくいってないため、起こっているのでは？
ruby on railsでｊｓファイルを読み込めるように設定をしてくれているが、特定のページに設定が出来ていないために、前のブラウザの情報が残っていることによって１回で読み込めていないのでは？
ディレクトリを確認すると、app/javascript/packs/price.js(今回適用するファイル)となっていた。

表示させたいrubyのnew.html.erbに
<%= javascript_include_tag "price.js" %>を記述すると、

Sprockets::Rails::Helper::AssetNotFound in Items#new
The asset "price.js" is not present in the asset pipeline.

というエラーが表示された。
assetファイル内にJavaScriptが無いことによるエラーだと思うが、特定のファイルを読み込ませる方法はこの場合どうすれば良いのかが分からない。
パスを指定するも、同様のエラーが出現してしまった。

説明足らずな部分があるかと思いますが、どうぞご回答よろしくお願いいたします。

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

ruby on rails 6.0.0を使用中になります。

大変お手数おかけしますがご確認よろしくお願いいたします。

Comments

[m.ts10806]

id=item-price の要素はどこにあるのでしょう。
HTMLもご提示ください。

[ryuya1204]

m.ts10806様
ご回答いただき大変ありがとうございます。
html.erbファイルを追加しました。100行目に記載をしております。
お手数おかけしますがご確認よろしくお願いいたします。

[m.ts10806]

loadをDOMContentLoaded に変更するとどうでしょうか。

[ryuya1204]

ご回答ありがとうございます。
load部分をDOMContentLoadedに変更して実行しましたが、同じ現象で、１回目は非同期通信が出来ておらず、リロードすると動作ができる状態になります。

実際の画面の動きをキャプチャしてみました。
https://gyazo.com/68a5916e08968fa1eb430b7e4b75d9e9

ご確認よろしくお願いいたします。

[m.ts10806]

なるほど。確認しました。
そういえば、非同期処理をしているところはどこでしょう？
キャッシュの可能性が考えられなくもないですが、「必ず1回目は動作しない」のであれば、
どこかにポイントがあるとは思うのですけど、現状提示されたコードの中からは見受けられませんでした。
複合的な要因がないとも言えないので、非同期投げているところも含めてRuby側のコードもご提示いただいたほうが良いかと思います。

[m.ts10806]

えぇと、「current_user_id」はどこから来てるどういう情報ですか？

[ryuya1204]

非同期処理を勘違いしており、非同期処理を行えていなかったです。
そのため、price.jsの記述に追加を行ったのですが、今度は
Uncaught ReferenceErrorとなりました。
自分自身いまだによくわかっていないのですが、
XMLHttpRequestで定義されているopenメソッドの第２引数で指定しているパスの記述がよくわかっていないです。
商品を出品している本人と紐づけるために、商品の出品はログインしているユーザーしか投稿出来ない設定にしているのでcurrent_user_idと指定したのですが、定義がされていないと記述が出てしまいました。

一度質問の方も編集させていただきましたので、ご確認いただければ幸いでございます。

[m.ts10806]

そういえば今でも再現しますか？
もしかしたら更新したけど保存してないorコンパイルされてない→リロードでコンパイルされて通った
のではという推測は1つしてるのですが。

[m.ts10806]

あぁやはりそれですね。
第2引数はリクエストを送るURLなので、サーバーサイドでルーティングされているURLを指定する必要があります。current_user_idをどのように取得しているか次第で解決可能には思います。

[ryuya1204]

丁寧にご返信いただきありがとうございます。
今はリロードをしても動作がしない状態になっております。
ルーティングは以下のように全てresourcesで作成しております。deviseを用いており、current_user_idをどのように取得しているのか自身も分からない状態となっております。正直この場合、rails routesのどの部分をみたら良いかも理解できていない状態です。
今回は、createアクションで出品を行うので、items#create　の　HTTPメソッドがPOST, URIが/itemsと表示されていたので、そちらを入力したところ、
Uncaught TypeError: XMLHttpRequest.open is not a function
at price

と表示されたので、第２引数のURLが指定できていないからかと思い、current_user_idを付け足した状態になります。

拙い文章とわかりづらい表現で大変申し訳ございません。

[ryuya1204]

routes.rbの記述内容になります。
https://gyazo.com/0d4f2acdc7c63733372ac25ae62829ad

お手数おかけしますがご確認よろしくお願いいたします。

[m.ts10806]

質問に追記願います。
結局のところcurrent_user_idは提示されている情報内では変数としてどこで定義されることもなくいきなり現れて使われているので、「どこから来た情報なのか（どこでどのように定義された情報なのか）」を追記していただきたいのですけど。。

[ryuya1204]

返信遅くなってしまい申し訳ございません。
そもそもなのですが、current_user_idを定義していない状態でした。
deviseのメソッドで、定義されているものかと思い、current_user_idを検索したのですが、見つからなかったです…

Answer 1

ビューファイルを開いて１回目だと非同期通信が起こらない　→　ブラウザをリロードすると非同期通信が正常に働き、解決する。

Turbolinks特有の挙動のような気がします。
もしそうなら、下記で期待通り動くかと思いますが、いかがでしょうか？

$(document).on('turbolinks:load', function() {
  function price() {
    const market_price = document.getElementById("item-price");
    const add_tax = document.getElementById("add-tax-price");
    const profit = document.getElementById("profit");
    market_price.addEventListener("keyup", () => {
      const selling_price = market_price.value;
      let fee = selling_price * 0.1
      let gains = selling_price * 0.9
      add_tax.textContent = fee;
      profit.textContent = gains;
    });
  }
});

Comments

[ryuya1204]

ご回答いただきありがとうございます。
こちらのコードで実行をしたのですが、同様の現象は直らない状態となってしまいました。