Ajax callback not happening while using jquery-ujs in Rails

Question

my controller is the extended version of shipments_controller.rb inside the file, 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

My route is :

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

Inside the application.js file, I have

//= 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();
  });
})

I have the view _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>

Now, when click on the Deliver link, the correct controller action is executing, and all data is getting updated to. But the only thing that is not happening page reload. The debugging console.log also not printing anything.

I looked jquery-ujs wiki link too, no luck!

Any idea how to fix ?

Answer 1

I found one work around.

When I put the overridden file in vendor/assets/javascripts/spree/backend/shipments.js.erb, it doesn't work.

It worked when I put in app/assets/javascripts/spree/backend/shipments.js.erb.

Working Jquery code:

//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);
    });
  });

And the relevant view html content is :

<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>