如何纠正在 rails 中添加或选择标签（Selectize.js）答案

【问题标题】：How do I rectify add or select tags in rails (Selectize.js)如何纠正在 rails 中添加或选择标签（Selectize.js）
【发布时间】：2020-06-13 14:26:08
【问题描述】：

我在使用 has_many :through 关联的 Rails 中有一个简单的标记系统。如果存在，我将向 Book（使用 selectize.js）添加标签，如果不存在则创建。但是，新的标签模态表单应该在创建标签时自动关闭，但它不再是了，我必须重新加载才能选择创建的标签。我正在使用带有 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);
  }
});


});

【问题讨论】：

标签： ruby-on-rails selectize.js

【解决方案1】：

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

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

希望对你有用！

【讨论】：