jquery-ujs 显然处理事件但结果在页面上不可见

Question

这个块

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

然后通过_travel.html.erbpartial 为@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.erb 部分没有进一步的 html，这很奇怪，因为如果我用 travel 替换 @travel 实例变量，它会返回预期的 rails 错误纸莎草
2. 并且状态情况没有刷新（无论是真还是假模式）...甚至不是“好”原始字符串。

rails 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