ruby Rails 7.1.2版：当验证失败并且控制器发送422状态时，Js停止工作

1rhkuytd 于 11个月前发布在 Ruby

关注(0)|答案(2)|浏览(102)

我将我的应用程序从5.2升级到7.1.2，后来我使用了turbolinks，经过验证后，它工作正常。升级后，我使用了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'
    });
  }

型
第一次正常工作时，验证错误会正确显示。browser screenshot
但验证失败后，我的js不工作，和日历选择器停止工作，我做错了.任何帮助将不胜感激，提前感谢.

ruby

来源：https://stackoverflow.com/questions/77610919/rails-version-7-1-2-js-stop-working-when-validation-fails-and-controller-send-4

2条答案

按热度按时间

wz1wpwve1#

@8bithero建议帮助我，谢谢你的建议.在我的情况下"turbo:render"事件工作.
我添加了两个事件监听器来实现解决方案。下面是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',
  });
}

字符串

赞(0）回复(0）举报 11个月前

p5fdfcr12#

很可能是当表单提交验证失败时，表单被重新呈现，而JavaScript（在您的情况下，布尔玛日历选择器）没有被重新初始化。Turbo触发的部分页面更新不会自动重新运行第一次页面加载时初始化的JS。
我的猜测是，JavaScript组件（如Bulma日历选择器）在表单提交验证失败后不会重新初始化，并且表单由Turbo重新呈现。
尝试在Turbo呈现表单后重新初始化您的JavaScript组件。为此，您需要侦听表单提交或页面更新后触发的特定于Turbo的事件。在JS中，您可以尝试将事件侦听器从turbo:load修改为turbo:submit-end或其他适当的Turbo事件。这将确保您的JS在每次Turbo更新表单时重新启动。
你可以尝试这样的东西：

document.addEventListener("turbo:submit-end", function(event) {
  if (event.target.id === 'your_form_id') {  // Replace with your actual form ID
    initializeBulmaCalendarPicker();
  }
});

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

字符串

赞(0）回复(0）举报 11个月前

我来回答

ruby Rails 7.1.2版：当验证失败并且控制器发送422状态时，Js停止工作

2条答案

相关问题

热门标签

最新问答