使用 Webpacker 添加 Bootstrap 后 Rails Destroy 无法正常工作

Question

I am creating a rails project and I am having a couple of issues.我正在创建一个 Rails 项目，但遇到了几个问题。

What I've done so far到目前为止我所做的

Firstly I added bootstrap to the project using cdn links in the application.html.erb file in layouts.首先，我使用布局中application.html.erb文件中的 cdn 链接将引导程序添加到项目中。 This gave me the formatting I needed and worked fine HOWEVER, due to turbo-links the javascript required for drop-down navigation stopped working when a page was changed.这给了我所需的格式并且工作正常，但是由于涡轮链接，下拉导航所需的 javascript 在页面更改时停止工作。

To fix this I used Webpacker and followed the tutorial here https://www.bootrails.com/blog/rails-bootstrap-tutorial/ to get bootstrap and the required javascript required working as intended.为了解决这个问题，我使用了 Webpacker 并按照此处的教程https://www.bootrails.com/blog/rails-bootstrap-tutorial/来获取引导程序和所需的 javascript 所需的按预期工作。

The problem I now face我现在面临的问题

Now that I have added in bootstrap, some of the sinks to destroy records no longer work.现在我已经在引导程序中添加了一些用于销毁记录的接收器不再起作用。

The code below, rather than displaying popup and destroying the record as it did previously, now takes me to the record and displays it.下面的代码不再像以前那样显示弹出窗口并销毁记录，而是将我带到记录并显示它。

<%= link_to 'Destroy', emergency_contact, method: :delete, data: { confirm: 'Are you sure?' } %>

Console logs控制台日志

When I click the above link the following is outputted in the rails server console.当我单击上面的链接时，rails 服务器控制台中会输出以下内容。

Started GET "/emergency_contacts/1" for 127.0.0.1 at 2022-06-15 11:01:48 +0100
Processing by EmergencyContactsController#show as HTML
  Parameters: {"id"=>"1"}
  EmergencyContact Load (0.1ms)  SELECT "emergency_contacts".* FROM "emergency_contacts" WHERE "emergency_contacts"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/emergency_contacts_controller.rb:63:in `set_emergency_contact'
  Rendering layout layouts/application.html.erb
  Rendering emergency_contacts/show.html.erb within layouts/application
  Rendered emergency_contacts/show.html.erb within layouts/application (Duration: 0.3ms | Allocations: 128)
[Webpacker] Everything's up-to-date. Nothing to do
  User Load (0.1ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/views/layouts/application.html.erb:45
  Rendered layout layouts/application.html.erb (Duration: 7.6ms | Allocations: 3648)
Completed 200 OK in 10ms (Views: 7.9ms | ActiveRecord: 0.3ms | Allocations: 4591)

Bits of code代码位

I've included bits of code that I think are relevant to the problem I'm facing我已经包含了一些我认为与我面临的问题相关的代码

config/webpacker.yml配置/webpacker.yml

Changed source_path: app/javascript to source_path: app/frontend将source_path: app/javascript更改为source_path: app/frontend

app/frontend/packs/application.scss应用程序/前端/包/application.scss

contents:内容：

@import "~bootstrap/scss/bootstrap";

app/frontend/packs/application.js应用程序/前端/包/application.js

contents:内容：

import '../js/bootstrap_js_files.js'

app/frontend/js/bootstrap_js_files.js应用程序/前端/js/bootstrap_js_files.js

contents:内容：

// import 'bootstrap/js/src/alert'  
// import 'bootstrap/js/src/button'  
// import 'bootstrap/js/src/carousel'  
import 'bootstrap/js/src/collapse'  
import 'bootstrap/js/src/dropdown'  
// import 'bootstrap/js/src/modal'  
// import 'bootstrap/js/src/popover'  
import 'bootstrap/js/src/scrollspy'  
// import 'bootstrap/js/src/tab'  
// import 'bootstrap/js/src/toast'  
// import 'bootstrap/js/src/tooltip'

app/views/layouts/application.html.erb应用程序/视图/布局/application.html.erb

head:头：

<head>
    <title>MyApp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

   <!-- Warning !! ensure that "stylesheet_pack_tag" is used, line below -->
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

Dropdown:落下：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    dd links
  </a>
  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
    <li><a class="dropdown-item" href="#">dd link 1</a></li>
    <li><a class="dropdown-item" href="#">dd link 2</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">dd link 3</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">dd link 4</a></li>
  </ul>
</li>

Answer 1

Replace link_to to button_to将link_to替换为button_to

<%= link_to 'Destroy', emergency_contact, method: :delete, data: { confirm: 'Are you sure?' } %>

to:至：

<%= button_to 'Destroy', emergency_contact, method: :delete, data: { confirm: 'Are you sure?' } %>

If confirm is still not working you can add onclick option如果confirm仍然不起作用，您可以添加onclick选项

<%= button_to 'Destroy', emergency_contact, method: :delete, onclick: "return confirm('Are you
sure?')" %>

Update:更新：

For working link_to with options method: :delete and data: { confirm: 'Are you sure?' }对于使用选项方法的link_to method: :delete和data: { confirm: 'Are you sure?' } data: { confirm: 'Are you sure?' } is responsible this gem jquery-ujs and in previous Rails versions it was included in assets/javascripts/application.js file data: { confirm: 'Are you sure?' }负责这个 gem jquery-ujs并且在以前的 Rails 版本中它包含在assets/javascripts/application.js文件中

//= require jquery
//= require jquery_ujs

Since you are using javascript_pack_tag with Webpacker and your entry point is javascript/packs/application.js not assets/javascripts/application.js so that to make it works you need to install yarn add jquery-ujs and import it in javascript/packs/application.js file由于您将javascript_pack_tag与Webpacker一起使用，并且您的入口点是javascript/packs/application.js而不是assets/javascripts/application.js ，因此要使其正常工作，您需要安装yarn add jquery-ujs并将其导入javascript/packs/application.js .js 文件

import { } from "jquery-ujs"

And after that you will be able to use link_to with data: { confirm: 'Are you sure?' }之后，您将能够将link_to与data: { confirm: 'Are you sure?' } data: { confirm: 'Are you sure?' } and method: :delete data: { confirm: 'Are you sure?' }和method: :delete

使用 Webpacker 添加 Bootstrap 后 Rails Destroy 无法正常工作

问题描述

What I've done so far到目前为止我所做的

The problem I now face我现在面临的问题

Console logs控制台日志

Bits of code代码位

config/webpacker.yml配置/webpacker.yml

app/frontend/packs/application.scss应用程序/前端/包/application.scss

app/frontend/packs/application.js应用程序/前端/包/application.js

app/frontend/js/bootstrap_js_files.js应用程序/前端/js/bootstrap_js_files.js

app/views/layouts/application.html.erb应用程序/视图/布局/application.html.erb

1 个解决方案

解决方案1
2 已采纳 2022-06-15 10:10:48

使用 Webpacker 添加 Bootstrap 后 Rails Destroy 无法正常工作

问题描述

What I've done so far到目前为止我所做的

The problem I now face我现在面临的问题

Console logs控制台日志

Bits of code代码位

config/webpacker.yml配置/webpacker.yml

app/frontend/packs/application.scss应用程序/前端/包/application.scss

app/frontend/packs/application.js应用程序/前端/包/application.js

app/frontend/js/bootstrap_js_files.js应用程序/前端/js/bootstrap_js_files.js

app/views/layouts/application.html.erb应用程序/视图/布局/application.html.erb

1 个解决方案

解决方案1 2 已采纳 2022-06-15 10:10:48

解决方案1
2 已采纳 2022-06-15 10:10:48