Techioz Blog

Rails バージョン 7.1.2: 検証が失敗し、コントローラーが 422 ステータスを送信すると、Js が動作を停止します

概要

アプリを 5.2 から 7.1.2 にアップグレードし、その後ターボリンクを使用して検証したところ、正常に動作しました。アップグレード後、Turbo を使用していますが、検証が失敗すると JavaScript が動作しなくなります。

参考のための私のコードスニペットは次のとおりです。 私のコントローラー:

# POST /admins/coupons
# POST /admins/coupons.json
def create
 @admins_coupon = Coupon.new(admins_coupon_params)
 @admins_coupon.admin = current_admin if current_admin.present?
 respond_to do |format|
   if @admins_coupon.save
     format.html { redirect_to admins_coupons_url, notice: 'Coupon ajouté avec succès.' }
     format.json { render :show, status: :created, location: @admins_coupon }
   else
     format.html { render :new, status: :unprocessable_entity }
     format.json { render json: @admins_coupon.errors, status: :unprocessable_entity }
   end
 end
end

私のフォームは次のとおりです。

<%= form_with(model: admins_coupon, url: url, scope: admins_coupon, local: true, data: {turbo: false}) do |form| %>
 <% if admins_coupon.errors.any? %>
   <div class='notification is-danger'>
     <ul>
       <% admins_coupon.errors.messages.each do |attr, msg| %>
         <li><%= t("activerecord.attributes.plan.#{attr}") %> 
           <%= msg.first %> </li>
       <% end %>
     </ul>
   </div>
 <% end %>

 <div class="columns">
   <div class="column">
     <div class="field">
       <%= form.label :code, class: 'label' %>
       <%= form.text_field :code, required: true, class: 'input', autofocus: true %>
     </div>
   </div>
   <div class="column">
     <div class="field">
       <%= form.label :description, class: 'label' %>
       <%= form.text_field :description, class: 'input' %>
     </div>
   </div>
   <div class="column">
     <div class="field">
       <%= form.label :redemption_limit, class: 'label' %>
       <%= form.number_field :redemption_limit, min: 0, required: true, class: 'input' %>
     </div>
    </div>
  </div>
<%end%>

ここに私のJS:

  document.addEventListener("turbo:load", function() {
    initializeBulmaCalendarPicker();
  });

  window.initializeBulmaCalendarPicker = function() {
    var datePickers = bulmaCalendar.attach('[type="date"]', {
      overlay: true,
      lang: 'fr',
      // dateFormat: 'mm-dd-yyyy'
      // dateFormat: 'yyyy-mm-dd'
    });
  }

初めて正常に動作しているときは、検証エラーが正しく表示されます。 ブラウザのスクリーンショット

しかし、検証が失敗した後、私のjsは機能しなくなり、カレンダーピッカーは私が間違っているところで機能しなくなりました。 何か助けがあれば幸いです。よろしくお願いします。

解決策

@8bithero の提案は役に立ちます。提案してくれてありがとう。 私の場合、「turbo:render」イベントは機能します。

この解決策を達成するために、2 つのイベント リスナーを追加しました。 js コードの例は次のとおりです。

import bulmaCalendar from './vendors/bulma-calendar';

["turbo:load", "turbo:render"].forEach((event) => {
  document.addEventListener(event, function() {
    initializeBulmaCalendarPicker();
  });
});

window.initializeBulmaCalendarPicker = function() {
  var datePickers = bulmaCalendar.attach('[type="date"]', {
    overlay: true,
    lang: 'fr',
  });
}