ruby-on-rails Rails 7:点击提交按钮时弹出框不工作

bkhjykvo  于 2023-05-08  发布在  Ruby
关注(0)|答案(1)|浏览(181)

我在一个rails 7应用程序中工作,当点击一个元素时,引导弹出框应该会出现。它一直在工作,直到我添加了一个带有提交按钮的表单。之后,元素在点击提交按钮后不会“弹出”(但在刷新后工作)。我想知道为什么会发生这种情况,以及如何解决它。
应用程序相当大,所以我试图在出现问题的地方创建一个简单的应用程序。我将描述创建应用程序的所有步骤和文件的内容:
1.版本:
ruby -v ruby 3.0.0p0(2020-12-25 revision 95aff21468)[x86_64-linux] rails -v Rails 7.0.4.3
1.创建应用程序
rails new popover --css=引导
1.进入
CD弹出框
1.发电控制器
料箱/轨道g控制器测试动作
1.文件app/javascript/application.js

import "@hotwired/turbo-rails"
 import "./controllers"
 import * as bootstrap from "bootstrap"

 let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
 let popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
   return new bootstrap.Popover(popoverTriggerEl) })

 var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
 var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
   return new bootstrap.Tooltip(tooltipTriggerEl) })

1.文件app/controllers/test_controller.rb

class TestController < ApplicationController
   def action
     grr = params[:grr].present? ? params[:grr] : nil
   end
 end

1.文件app/views/test/action.html.erb

<div id="some-id">
<%= form_tag('action',  :method => "get") do %>

<fieldset class="">
    <legend class="">Type Something</legend>

    <div class="form-group">
      <div class="form-group">
        <%= label_tag "GRR: ",  nil, class: "col-lg-2 col-form-label"   %>
        <%= text_field_tag :grr,  nil, class: "col-lg-4" %>
      </div>
      <%= submit_tag "Submit", class: "col-lg-2 btn btn-primary "    %>
    </div>
</fieldset>

<%end%>

<%= generate_popover %>

Popover一直工作,直到您单击提交按钮。刷新页面后再次工作。
1.文件app/helpers/test_helper.rb

module TestHelper
   def generate_popover
     button_tag("click me to popover message",
        data: { bs_toggle: 'popover',
                bs_html: 'true',
                bs_content: "Popover Msg" })
   end
 end

我想知道是什么原因造成了这个问题以及如何解决它。

u0sqgete

u0sqgete1#

如果这个前提是正确的:

  • 页面加载:
  • “GRR”的表单:
  • button with data-bs_toggle=“popover”

以及:

  • 在表单提交之前,弹出框按钮按预期工作
  • 表单提交后,弹出框按钮不起作用
  • 页面刷新后,弹出按钮按预期工作

当按下提交按钮时,表单为:

  • 将表单数据AJAX化到控制器动作
  • 对所述控制器动作执行GET请求

其中任何一个正在发生的,它是打破 Bootstrap 的eventListener正在等待按钮点击。
刷新页面会重新加载bootstrap的JS,eventListener会重新建立,按钮会再次按预期工作。
修复有点棘手,但是您必须找到一种方法来防止eventListener被破坏,或者在表单提交之后强制重新建立eventListener
我首先要尝试的是,尤其是如果我不关心 AJAX 与GET,是切换我的表单的远程设置:

<%= form_tag('action',  method: "get", remote: true) do %>
<%= form_tag('action',  method: "get", remote: false) do %>

如果其中一个解决了问题,我会称之为胜利,然后继续前进。比用JS容易多了。

相关问题