Rails JQuery Ajax：刷新表行引发404错误

Question

I have a table of order_items where each order_item is represented on a table row with a button to "set_aside". The goal is to execute the set_aside controller action for an individual order item and refresh only that table row with an updated table row that contains the new status of the order_item.

The controller action:

order_items_controller.rb

def set_aside
  @order_item = OrderItem.find(params[:id])
  respond_to do |format|
    format.js
  end
end

My set_aside.js.erb is:

$('#<%= @order_item.id %>').load("<%= j render 'admin/shipments/packing_item_row.haml', locals: {i: @order_item, index: 1} %>");
$('#<%= @order_item.id %>').show();

The view is admin/shipments/packing.haml and contains a table where each table row of the instance variable @order_items is rendered as the partial "packing_item_row" and all table rows have id set.

Here's where I am stuck:

Using the .load() function keeps on throwing an error that I can see in Web Inspector/XHR.

Web Inspector shows that the set_aside action correctly includes the order_item.id and the associated HTML in the render call. But then there is a second XHR query that throws a 404 status error by trying to load a admin/shipments/%3Ctr%3E%Ctd resource as well.

Subbing in the .html method seems to load the partial just fine, so it's not a matter of the partial having faulty locals passed in. But the load function simply doesn't seem to work and I am not sure what else to try at this point.

Can someone point me in the right direction?

Answer 1

Why this doesn't work

It looks from the jQuery docs that load() accepts a URL, whereas you're giving it some HTML.

So that means it's trying to access a URL that's the return value of the HTML.

That, I suspect, is where the admin/shipments/%3Ctr%3E%Ctd URL is coming from.

The %3Ctr%3E%Ctd gobbledegook is Rails returning the HTML to jQuery.

jQuery in turn is trying to make sense of it as a URL. < encoded is %3C - it's taking the start of the first table in your view.

Why can't you use html() ?

It's the easiest way and tried and tested in this scenario. If there's a good reason you don't want to use html() ...

How to use load()

If you really want to use load you'll need to create a route for this partial rendering.

If the route is called admin_shipments_packing_item_path you'd do something like:

$('#<%= @order_item.id %>').load("<%= j admin_shipments_packing_item_path(@order_item) %>");

Any more questions, just ask!