Ruby China

新手问题 求助：Rails 6 中使用 webpacker 集成了 bootstrap4，modal 方法无效

u1435638317 · 2020年03月01日 · 最后由 u1435638317 回复于 2020年03月02日 · 3286 次阅读

我通过 webpacker 集成了 Bootstrap 4 后，发现手动调用$("#modal_block").modal("show");无效，提示 TypeError $(...).modal is not a function.

而通过 data-toggle="modal" 的方式可以工作。想了解一下有没有人遇到这个问题呢？这是一个已知 Bug，还是我的用法配置有问题呢？

相关的配置：

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment

app/webpacker/pack/admin.js

import jquery from 'jquery';
window.$ = window.jquery = jquery;

import "bootstrap"
require("@rails/ujs").start()
require("turbolinks").start()
require("bootstrap-datepicker")

document.addEventListener("turbolinks:load", function(){


    $("#open_scan").click(function(){
      $("#modal-scan-shipping-box-start").modal("show");
    });

});
Chorder #1 2020年03月02日

本地测试了一下没有遇到你的问题，但我跟你一样都是业余前端，不知道是具体为什么，只好粘贴一下我的代码。

application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

import 'bootstrap'
import $ from 'jquery';

$(document).on('turbolinks:load', function(){
    $("#show_modal_btn").click(function(){
      console.log("I will open modal");
      $("#myModal").modal("show");
    });
});

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

module.exports = environment

test.html

<h1>Test#test</h1>
<p>Find me in app/views/test/test.html.erb</p>


  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Show Modal By DataToggle
  </button>

  <button id="show_modal_btn" class="btn btn-success">Show Modal By Event</button>

  <!-- 模态框 -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">模态框头部</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- 模态框主体 -->
        <div class="modal-body">
          模态框内容..
        </div>

        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>

      </div>
    </div>
  </div>

两个按钮都能点开 Modal，没有遇到控制台报错。

u1435638317 #2 2020年03月02日

@Chorder 解决了，谢谢。主要还是配置的问题，改了一下就可以了，就这样吧。

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
)

module.exports = environment
u1435638317 关闭了讨论。 03月02日 13:14
需要 登录 后方可回复, 如果你还没有账号请 注册新账号