在 Rails 中使用 jquery-ujs 时未发生 Ajax 回调

Question

我的控制器是文件中shipments_controller.rb的扩展版本shipments_controller_decorator.rb。

Spree::Api::ShipmentsController.class_eval do
  before_filter :find_and_update_shipment, only: [:ship, :ready, :add, :remove, :deliver]

  def deliver
    @shipment.deliver!
    respond_with(@shipment, default_template: :show)
  end
end

我的路线是：

put '/api/shipments/:id/deliver', :to => 'spree/api/shipments#deliver', :constraints => {:format => /json/} ,:as => "shipment_deliver"

在 application.js 文件中，我有

//= require jquery
//= require jquery_ujs
//= require bootstrap
$(document).ready(function(){
  $('a.deliver.button.fa.fa-arrow-right').on('ajax:success', function(data, status, xhr) {
    console.log("Hey!! I am there....")
    location.reload();
  });
})

我有视图_shipment.html.erb：

<div id="<%= "shipment_#{shipment.id}" %>" data-hook="admin_shipment_form">
  <%= render :partial => "spree/admin/variants/split", :formats => :js %>
  <fieldset class="no-border-bottom">
    <legend align="center" class="stock-location" data-hook="stock-location">
      <span class="shipment-number"><%= shipment.number %></span>
      -
      <span class="shipment-state"><%= Spree.t("shipment_states.#{shipment.state}") %></span>
      <%= Spree.t(:package_from) %>
      <strong class="stock-location-name" data-hook="stock-location-name">'<%= shipment.stock_location.name %>'</strong>
      <% if shipment.ready? and can? :update, shipment %>
        -
        <%= link_to Spree.t(:ship), '#', :class => 'ship button fa fa-arrow-right', :data => {'shipment-number' => shipment.number} %>
      <% elsif shipment.shipped? and can? :update, shipment %>
        -
        <%= link_to Spree.t(:deliver), main_app.shipment_deliver_path(shipment), {method: :put, :remote => true, data: {'shipment-number' => shipment.number}, :class => 'deliver button fa fa-arrow-right'} %>
      <% end %>
    </legend>
  </fieldset>

现在，当点击 Deliver 链接时，正确的控制器操作正在执行，并且所有数据都被更新到。但唯一没有发生的事情页面重新加载。调试console.log也没有打印任何东西。

我也看了jquery-ujs wiki 链接，没有运气！

知道如何解决吗？

Answer 1

如果以下gist suggestions 都不起作用，我认为您必须将 json 响应发送回 ajax 以使其接收到它理解的响应。像这样：

respond_with(@shipment, default_template: :show) do |format|
  format.html { render }
  format.json { render json: @shipment }
end

Answer 2

由于您使用的是“remote: true”而不是 jquery 原生 Ajax，请尝试以下解决方案：

当您使用“remote: true”对服务器执行 ajax 调用（当然使用 ruby​​ on rails）时，您会在控制器中执行某个操作。在您的情况下，此操作是“交付”。在该操作中，您应该使用 js 进行响应并将您想要的数据发送回客户端。例如：

respond_with(@shipment, default_template: :show) do |format|
 format.html 
 format.js 
end

之后，您应该（在受尊重的视图目录中）创建一个以操作命名的文件，但不是 html 或 haml，而是 js。因此，如果您的控制器名为“ShippmentsController”并且您的操作是“deliver”，那么您应该创建一个名为“app/views/shippments”的文件>/deliver.js.erb”。在那里你可以编写在 Ajax 完成时应该执行的 jquery/javascript。

Answer 3

我找到了一个work around。

当我将覆盖的文件放入vendor/assets/javascripts/spree/backend/shipments.js.erb 时，它不起作用。

当我放入时它起作用了 app/assets/javascripts/spree/backend/shipments.js.erb。

工作 Jquery 代码：

//handle deliver click
  $('[data-hook=admin_shipment_form] a.deliver').on('click', function () {
    var link = $(this);
    var shipment_number = link.data('shipment-number');
    var url = Spree.url(Spree.routes.shipments_api + '/' + shipment_number + '/deliver.json');
    $.ajax({
      type: 'PUT',
      url: url
    }).done(function () {
      window.location.reload();
    }).error(function (msg) {
      console.log(msg);
    });
  });

而相关的view html内容是：

<div id="<%= "shipment_#{shipment.id}" %>" data-hook="admin_shipment_form">
  <%= render :partial => "spree/admin/variants/split", :formats => :js %>
  <fieldset class="no-border-bottom">
    <legend align="center" class="stock-location" data-hook="stock-location">
      <span class="shipment-number"><%= shipment.number %></span>
      -
      <span class="shipment-state"><%= Spree.t("shipment_states.#{shipment.state}") %></span>
      <%= Spree.t(:package_from) %>
      <strong class="stock-location-name" data-hook="stock-location-name">'<%= shipment.stock_location.name %>'</strong>
      <% if shipment.ready? and can? :update, shipment %>
        -
        <%= link_to Spree.t(:ship), '#', :class => 'ship button fa fa-arrow-right', :data => {'shipment-number' => shipment.number} %>
      <% elsif shipment.shipped? and can? :update, shipment %>
        -
        <%= link_to Spree.t(:deliver), '#', :class => 'deliver button fa fa-arrow-right', :data => {'shipment-number' => shipment.number} %>
      <% end %>
    </legend>
  </fieldset>