Как исправить добавление или выбор тегов в рельсах (Selectize. js) - PullRequest
Новая
       18

Как исправить добавление или выбор тегов в рельсах (Selectize. js)

1 голос
/ 29 февраля 2020

У меня есть простая система тегирования в рельсах, использующая ассоциацию has_many: through. Я добавляю теги в книгу (с помощью selectize. js), если она существует, или создает, если ее нет. Тем не менее, новая модальная форма тега должна автоматически закрываться при создании тега, но это больше не происходит, мне нужно перезагрузить компьютер, чтобы выбрать созданные теги. Я использую рельсы 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);
  }
});


});

1 Ответ

1 голос
/ 11 марта 2020

Я думаю, что проблема с вашим Rails.enableElement($('#new_tag')[0]);. Я нашел этот ответ, и он сработал для меня (я адаптировал свой код к вашему вопросу): 

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

Надеюсь, что это работает для вас!

...