rails 5 远程：真 returns javascript 在 html 模板中

Question

所以我的一个view上有一个deletelink，需要用UJS去运行对应controller上的destroy方法，然后return一个destroy.js.erb模板。

但是，当我单击删除 link 时，记录被删除，并且控制器响应我在 html 模板中呈现的 js.erb 代码。

这里是所有的代码，我能想到的建立：

dealer.rb

class Dealer < ApplicationRecord
  has_many :addresses, dependent: :destroy
end

address.rb

class Address < ApplicationRecord
  belongs_to :dealer
end

_address.slim 从 dealers/show.slim 渲染而来：

= render partial: "addresses/address", collection: @dealer.addresses, as: :address

li id="address_#{address.id}"
  span.prime = address.no_or_street
  span = address.city
  span = address.state
  span = address.zip
  span = address.created_at.strftime("%D")
  div.options
    = link_to edit_address_path(address), class: "small primary button" do
      i.fa.fa-pencil
    = link_to address, method: :delete, data: { confirm: 'Are you sure?' }, remote: true, class: "small button" do
      i.fa.fa-trash

地址控制器 class 地址控制器 < 应用程序控制器

......

def destroy
    @address = Address.find(params[:id])
    @address.delete
    respond_to do |format|
      format.js
    end
  end

end

destroy.js.erb

$('#address_' + <%= @address.id %>).addClass("animated bounce")

setTimeout(
  function()
  {
    $('#address_' + <%= @address.id %>).remove()
  }, 700);

application.js

//= require jquery
//= require rails-ujs
//= require_tree .

一旦执行，控制器响应：

<!DOCTYPE html><html><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><title>DynamicCrm</title><meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="M90LYBZXz7yOa+z1W9kKvizLpB7AIkBbj73iTDcYazb+Cx/mLqx8eqgm3uBpunu+CbwLpPZuZrB373rQVNYsrA==" /><link rel="stylesheet" media="all" href="/assets/application.self-bc77e09c6a8ed0f211092b8f1947c38fa61930bf04aa53036fe951f72231f5c3.css?body=1" /><script src="https://cdn.quilljs.com/1.2.6/quill.js"></script><script src="https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js"></script><script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/assets/rails-ujs.self-817d9a8cb641f7125060cb18fefada3f35339170767c4e003105f92d4c204e39.js?body=1"></script>
<script src="/assets/turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1"></script>
<script src="/assets/medium-editor.self-a4f361c2dcb6e54ca3400cb6cb9de9b0a38eddd36c417cd31f8add83ae7c422c.js?body=1"></script>
<script src="/assets/cocoon.self-93f6a0ae289b45a10cca9a37fd83317f30d955625d791077135f56fe87c6816f.js?body=1"></script>
<script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1"></script>
<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1"></script>
<script src="/assets/forms.self-ca13eb54a07ade9163214952dd1ed5bd12e2db2e02b5171cc3a1d67db0026258.js?body=1"></script>
<script src="/assets/ga.self-53554b04855ddc62e886dc6fed8f279f087209741af965bf98708b05291e74c9.js?body=1"></script>
<script src="/assets/map.self-030b3f67869a566fd0c79c88561d7dd5d9b87f622b098a2c29f7188b41342699.js?body=1"></script>
<script src="/assets/navigation.self-0046732a6dc62531d0ca31121f544abee25cf4211fa881d6d8dcdd1c144710a4.js?body=1"></script>
<script src="/assets/tabs.self-845997e6e6523358235d01665b3e930e254396665abd188787f8ee6a57d87af2.js?body=1"></script>
<script src="/assets/application.self-5e866087125b4eb5e02a8365d73cdaeb7f2127bbb3f479fb54ab3ddb0d5c66af.js?body=1"></script><meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" /></head><body><div id="navigation"><div id="burger"><div class="inner"></div></div></div><div id="menu"><div class="center"><div class="menu"><nav><ul><li><a href="/dealers">Dealers</a></li><li><a href="/">Orders</a></li><li><a href="/">Schedule</a></li><li><a href="/product_lines">Products</a></li><li><a href="/pages/settings">Settings</a></li></ul></nav></div><div class="menu"><nav><ul><li><a href="/">Home</a></li><li><a href="/pages/about">Products</a></li><li><a href="/pages/about">About</a></li><li><a href="/pages/contact">Contact</a></li><li><a href="/">Messages</a></li><li><a href="/logout">Sign Out</a></li></ul></nav></div></div></div><div id="page">

$('#address_' + 3).addClass("animated bounce")

setTimeout(
  function()
  {
    $('#address_' + 3).remove()
  }, 700);

// $('#address_' + 3).remove()
</div></body></html>

Answer 1

我认为您的 AddressesController 使用的布局不是默认布局。您可以在操作 :destroy 上使用关键字 :except 或强制操作 :destroy 不呈现布局，例如：

layout 'my_special_layout', except: :destroy

render layout: false

提示：

= render partial: "addresses/address", collection: @dealer.addresses, as: :address
= render @dealer.addresses # better
------------
= li id="address_#{address.id}"
= li id="#{dom_id(address)}" # better
------------
# You don't need to use `respond_to` if the action only accept 1 format.
respond_to do |format|
  format.js
end

rails 5 远程：真 returns javascript 在 html 模板中

rails 5 remote: true returns javascript within html template

ruby-on-rails

unobtrusive-javascript