我正在尝试在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;
}
然后从hideModal()调用create.js.erb，但错误变为TypeError: $(...).hideModal is not a function。但是，在custom.js中，.modal()方法可以正常工作。似乎create.js.erb文件没有导入，或有什么东西，但是我不确定如何解决。我正在将Webpacker与environment.js文件一起使用，如下所示：
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")
并且在<head>的application.html.erb部分中：
<%= 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' %>
非常感谢您的帮助！
现在正在工作，我只需要为Bootstrap ... oops添加脚本标签。如果有人遇到相同的问题，我在</body>中的application.html.erb之前添加了以下脚本：