如何纠正 rails (Selectize.js) 中的添加或 select 标签

Question

我在 rails 中有一个简单的标记系统，使用 has_many :through 关联。如果书存在，我将添加标签（使用 selectize.js），如果不存在，我将添加标签。但是，新的标签模态表单应该会在创建标签时自动关闭，但现在不会了，我必须重新加载到 select 创建的标签。我在 webpacker 中使用 rails 6。我在没有 webpacker 的情况下尝试了这个功能，一切顺利。

books/form.html.erb
<%= form_with(model: book, local: true) do |form| %>
   <% if book.errors.any? %>
     <div id="error_explanation">
       <p><%= pluralize(book.errors.count, "error") %> prohibited this book from being saved:</p>

      <ul>
      <% book.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
<% end %>

<div class="field">
  <h6><%= form.label :title %></h6>
  <%= form.text_field :title, class: "form-control" %>
</div>

<div class="field">
  <%= form.label :tags %>
  <%= form.select :tag_ids, Tag.all.pluck(:name, :id), {}, { multiple: true, class: "selectize" } %>
</div>

<div class="actions">
  <%= form.submit %></p>
</div>


<% end %>

<div class="modal fade tag-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
   <div class="modal-dialog modal-sm" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h6 class="modal-title" id="mySmallModalLabel">Add Tag</h6>
      </div>
      <div class="modal-body">
        <%= form_for Tag.new do |f| %>
          <div class="form-group">
            <%= f.label :name %>
            <%= f.text_field :name, class: "form-control" %>
          </div>
         <div class="form-group">
           <%= f.submit class: "btn btn-primary" %>
         </div>
       <% end %>
     </div>
</div>

这是相应的 js

tag.js
$(document).on("turbolinks:load", function() {
var selectizeCallback = null;

$(".tag-modal").on("hide.bs.modal", function(e) {
  if (selectizeCallback != null) {
    selectizeCallback();
    selecitzeCallback = null;
  }

  $("#new_tag").trigger("reset");
  // $.rails.enableFormElements($("#new_tag"));
  Rails.enableElement($('#new_tag')[0]);
});

$("#new_tag").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});
      selectizeCallback = null;

      $(".tag-modal").modal('toggle');
    }
  });
});

$(".selectize").selectize({
  maxItems: 5,
  create: function(input, callback) {
    selectizeCallback = callback;

    $(".tag-modal").modal();
    $("#tag_name").val(input);
  }
});


});

Answer 1

我认为问题出在您的 Rails.enableElement($('#new_tag')[0]); 上。我找到了这个答案并且它对我有用（我根据你的问题调整了我的代码）：

$("#new_tag").trigger("reset");
    var selectors = [$.rails.linkDisableSelector, $.rails.formEnableSelector].join(', ');
    $(selectors).each(function() {
      $.rails.enableElement(this);
    })

希望对你有用！

如何纠正 rails (Selectize.js) 中的添加或 select 标签

How do I rectify add or select tags in rails (Selectize.js)

ruby-on-rails

selectize.js