Bootstrap 4 和 Rails 6：$(...).modal 不是“.js.erb”文件中的函数（但适用于其他 .js 文件？）[关闭]
Posted
技术标签:
【中文标题】Bootstrap 4 和 Rails 6：$(...).modal 不是“.js.erb”文件中的函数（但适用于其他 .js 文件？）[关闭]【英文标题】：Bootstrap 4 and Rails 6: $(...).modal is not a function inside ".js.erb" file (but works in other .js files?) [closed] 【发布时间】：2020-06-06 18:58:55 【问题描述】：我正在尝试在 Rails 6 中使用 Bootstrap 模态。模态包含一个使用 Ajax 提交的表单，如果表单提交成功，我希望模态隐藏自身（但如果不是，那么我修改内容模态显示错误 - 尚未实现这部分）。现在，表单已成功提交，但我无法在成功提交后隐藏create.js.erb 内的模式。
在application.html.erb:
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered align-items-center" role="document">
<div class="modal-content">
<%= render partial: 'users/register' %>
</div>
</div>
</div>
在_register.html.erb:
<% @user ||= User.new %>
<%= form_with(model: @user, remote: true) do |f| %>
<div class="modal-header">
<h5 class="modal-title">Register</h5>
</div>
<div class="modal-body mx-3">
<%= render partial: 'shared/error_messages' %>
<%= f.label :user_name %>
<%= f.text_field :user_name, class: 'form-control', id: 'userName' %>
<%= f.label :email_address %>
<%= f.email_field :email_address, class: 'form-control' %>
<%= f.label :password %>
<%= f.password_field :password, class: 'form-control' %>
<%= f.label :password_confirmation, "Confirmation" %>
<%= f.password_field :password_confirmation, class: 'form-control' %>
</div>
<div class="modal-footer">
<%= f.submit "Create my account", class: "btn btn-primary" %>
</div>
<% end %>
在users_controller.rb:
def create
@user = User.new(user_params)
if @user.save
# handle successful save
log_in @user
respond_to do |format|
format.html
flash[:success] = "Welcome to the Commission Marketplace!"
redirect_to @user
format.js
end
else
render 'new'
end
end
在create.js.erb:
$('#navbar').html("<%= j(render 'navbar', data: @data) %>");
$('#registerModal').modal('hide');
// error: $(...).modal is not a function
我还尝试将插件添加到我的 custom.js 文件中，如下所示：
jQuery.fn.hideModal = function()
$(this).modal('hide');
return this;
然后从create.js.erb调用hideModal()，但随后错误变为TypeError: $(...).hideModal is not a function。但是，在custom.js 中，.modal() 方法可以正常工作。似乎create.js.erb 文件没有得到导入或其他东西，但我不知道如何解决这个问题。我正在使用带有 environment.js 文件的 Webpacker，如下所示：
const environment = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.append(
'Provide',
new webpack.ProvidePlugin(
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
)
)
module.exports = environment
在application.js 我有：
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
import "bootstrap"
require("./custom")
在application.html.erb 的<head> 部分：
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
非常感谢您的帮助！
【问题讨论】：
【参考方案1】：它现在可以工作了，我只需要为 Bootstrap 添加脚本标签...哎呀。如果有人遇到同样的问题，我在</body> 之前在application.html.erb 中添加了以下脚本：
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
【讨论】：
以上是关于Bootstrap 4 和 Rails 6：$(...).modal 不是“.js.erb”文件中的函数（但适用于其他 .js 文件？）[关闭]的主要内容，如果未能解决你的问题，请参考以下文章
Ruby on Rails 6. 使用带有 Ajax 的 Bootstrap 4 工具提示
Rails 6 Bootstrap 4 Modal在提交时未关闭
如何在 Rails 6 中进行 Stateful Bootstrap 4 Tab Navigation
将 Bootstrap 主题（带有自定义 CSS 和 JS 插件）与带有 Webpacker 和 Yarn/NPM 的 Rails 6 集成