jquery-ujs явно обрабатывает событие, но результат не виден на странице

Question

этот блок

<div id='travels' class='tableize'>
  <%= render @travels %>
</div>

затем отправляется для визуализации через _travel.html.erb частичную следующую форму и результат для каждой записи @ travels

  <div class='small-2 medium-2 large-2 columns text-right'>
    <%= form_with(model: travel, remote: true, data: {'js-travel-form' => true, method: :patch}, url: restriction_update_travels_path, data: {'js-travel-form' => true}) do |form| %>
      <%= form.hidden_field :id, value: travel.id %>
      <%= form.submit ' Change' %>
    <% end %>
  </div>
  <div class='small-2 medium-2 large-2 columns' data-js-travelstatus=<%= travel.id %>>
    <% if travel.restricted %>
      <%= fa_icon('ban', class: 'fa-lg smaller warning') %>
    <% end %>
  </div>

Контроллер обновляет состояние и отправляет

@travel = Travel.find(params[:travel][:id])
if @travel.restricted.nil? || !@travel.restricted? 
  @travel.update_attributes(restricted: true)
else
  @travel.update_attributes(restricted: false)
end
if @travel.save
  render partial: 'travelstatus'
end

где restriction_update.js.erb генерирует следующие js

$("#data-js-travelstatus").replaceWith("<%= j(render @travelstatus)  %>");

сделать с помощью _travelstatus.html.erb

<% if @travel.restricted %>
  good      <%= fa_icon('ban', class: 'fa-lg smaller warning') %>
<% end %>

Сетевая консоль инструмента разработчика браузера принимает действие и возвращает в качестве ответа

good

но

1. больше нет html согласно частичному html.erb, что странно, потому что, если я заменю переменную экземпляра @travel на travel, она вернет ожидаемую ошибку rails papyrus
2. и статусная ситуация не обновляется (в обоих случаях - в режиме false) ... даже в «хорошей» необработанной строке.

рельсы 5.2.4, но с вызовом jquery-ujs

где это пошло не так?

Answer 1

Я думаю, что проблема здесь:

$("#data-js-travelstatus").replaceWith("<%= j(render @travelstatus)  %>");

JavaScript не может найти узел #data-js-travestatus, который, как вы ожидаете, будет <div class='small-2 medium-2 large-2 columns' data-js-travelstatus=<%= travel.id %>>. Но для этого div.

не установлен атрибут id.

Вы можете переписать его как:

<div class='small-2 medium-2 large-2 columns' id="<%= travel.id %>">

и

$("#<%= @travel.id %>").replaceWith("<%= j(render @travelstatus)  %>");

ОБНОВЛЕНИЕ: я пропустил это:

Вы рендерите travelstatus, что неправильно. Вы должны сделать restriction_update.

@travel = Travel.find(params[:travel][:id])
if @travel.restricted.nil? || !@travel.restricted? 
  @travel.update_attributes(restricted: true)
else
  @travel.update_attributes(restricted: false)
end
if @travel.save
  #render partial: 'travelstatus' <- this is wrong
  render partial 'restriction_update'
end