模态框不会关闭 Selectize Rails 6
Modal Won't Close Selectize Rails 6
您好,我正在关注一个旧的 rails 视频以供选择并尝试更新 rails 6
我有一个属于系列的商品。
class Item < ApplicationRecord
belongs_to :series
end
一个系列有很多项目
class Series < ApplicationRecord
has_many :items
end
在我使用选择性查找或创建的项目表单中
<%= form_for @item do |form| %>
<div class="form-group">
<%= form.select :series_id, Series.all.pluck(:name, :id), {}, { class: "selectize" } %>
</div>
....
我的代码没有问题,除非我在创建新系列后在我的控制台中遇到以下问题并且模式不会关闭。
<!-- Modal -->
<div class="modal fade series-modal" id="series-modal" tabindex="-1" role="dialog" aria-labelledby="SeriesModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="SeriesModal">Add series</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<%= form_for Series.new do |f| %>
<div class="form-group">
<%= f.label :name %>
<%= f.text_field :name, class: "form-control" %>
</div>
<div class="form-group">
<%= f.collection_select(:account_id, Account.all, :id, :name ) %>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<%= f.submit class: "btn btn-primary" %>
</div>
<% end %>
</div>
</div>
</div>
</div>
JS
<!-- JS -->
$(document).on("turbolinks:load", function() {
var selectizeCallback = null;
$(".series-modal").on("hide.bs.modal", function(e) {
if (selectizeCallback != null) {
selectizeCallback();
selectizeCallback = null;
}
$("#new_series").trigger("reset");
$.rails.enableFormElements($("#new_series"));
});
$("#new_series").on("submit", function(e) {
e.preventDefault();
$.ajax({
method: "POST",
url: $(this).attr("action"),
data: $(this).serialize(),
success: function(response) {
selectizeCallback({value: response.id, text: response.name});
$(".series-modal").modal('toggle');
}
});
});
$(".selectize").selectize({
create: function(input, callback) {
selectizeCallback = callback;
$(".series-modal").modal();
$("#series_name").val(input);
}
});
});
我确信我的 js 与 bootstrap 现在处理关闭模态的方式有关
感谢您的帮助
后来我发现这与页面上实际代码的位置有关。
确保 html 页面上模态 1 在模态 2 之前。
您好,我正在关注一个旧的 rails 视频以供选择并尝试更新 rails 6
我有一个属于系列的商品。
class Item < ApplicationRecord
belongs_to :series
end
一个系列有很多项目
class Series < ApplicationRecord
has_many :items
end
在我使用选择性查找或创建的项目表单中
<%= form_for @item do |form| %>
<div class="form-group">
<%= form.select :series_id, Series.all.pluck(:name, :id), {}, { class: "selectize" } %>
</div>
....
我的代码没有问题,除非我在创建新系列后在我的控制台中遇到以下问题并且模式不会关闭。
<!-- Modal -->
<div class="modal fade series-modal" id="series-modal" tabindex="-1" role="dialog" aria-labelledby="SeriesModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="SeriesModal">Add series</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<%= form_for Series.new do |f| %>
<div class="form-group">
<%= f.label :name %>
<%= f.text_field :name, class: "form-control" %>
</div>
<div class="form-group">
<%= f.collection_select(:account_id, Account.all, :id, :name ) %>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<%= f.submit class: "btn btn-primary" %>
</div>
<% end %>
</div>
</div>
</div>
</div>
JS
<!-- JS -->
$(document).on("turbolinks:load", function() {
var selectizeCallback = null;
$(".series-modal").on("hide.bs.modal", function(e) {
if (selectizeCallback != null) {
selectizeCallback();
selectizeCallback = null;
}
$("#new_series").trigger("reset");
$.rails.enableFormElements($("#new_series"));
});
$("#new_series").on("submit", function(e) {
e.preventDefault();
$.ajax({
method: "POST",
url: $(this).attr("action"),
data: $(this).serialize(),
success: function(response) {
selectizeCallback({value: response.id, text: response.name});
$(".series-modal").modal('toggle');
}
});
});
$(".selectize").selectize({
create: function(input, callback) {
selectizeCallback = callback;
$(".series-modal").modal();
$("#series_name").val(input);
}
});
});
我确信我的 js 与 bootstrap 现在处理关闭模态的方式有关
感谢您的帮助
后来我发现这与页面上实际代码的位置有关。
确保 html 页面上模态 1 在模态 2 之前。