选择Rails AJAX更新

时间:2016-10-01 21:46:42

标签: jquery ruby-on-rails ajax

我有一个Index视图,列出了集合中的订单。每个订单都有一个状态。我希望能够从索引页面,AJAX样式更新订单状态。

在尝试更新记录时,不确定为何ID为NULL。

index.html.erb

<h1>Recent Orders</h1>

<section class="order-results">
  <ol class="list-group">
    <%= render partial: 'pf_order', collection: @pf_orders %>
  </ol>
</section>

_pf_orders.html.erb

<%= form_for(pf_order, url: update_receiver_status_path(pf_order)) do |f| %>
    <%= f.select :receiver_status, options_for_select(receiver_statuses, f.object.receiver_status), {include_blank: true}, {class: 'form-control'} %>
<% end %>

pf_orders_controller.rb

def index
  @pf_orders = PfOrder.all
end

def update_receiver_status
  @status = PfOrder.find_by(id: params[:id])
  @status.update_attributes(pf_order_params)
end

pf_orders.coffee

jQuery ($) ->
  $(document).ready ->
    $("#pf_order_receiver_status").bind 'change', ->
      $.ajax
        type: 'PATCH'
        url: 'pf_orders/update_receiver_status'
        data: 'pf_order[receiver_status]=' + $('#pf_order_receiver_status').val()

的routes.rb

patch 'pf_orders/update_receiver_status', as: 'update_receiver_status'

日志

Started PATCH "/pf_orders/update_receiver_status" for 127.0.0.1 at 2016-10-01 17:36:11 -0400
Processing by PfOrdersController#update_receiver_status as */*
  Parameters: {"pf_order"=>{"receiver_status"=>"Completed"}}
  PfOrder Load (1.0ms)  SELECT  "pf_orders".* FROM "pf_orders" WHERE "pf_orders"."id" IS NULL LIMIT $1  [["LIMIT", 1]]
Completed 500 Internal Server Error in 4ms (ActiveRecord: 1.0ms)



NoMethodError (undefined method `update_attributes' for nil:NilClass):

2 个答案:

答案 0 :(得分:1)

您未在任何地方提交订单ID。您可以在日志中验证 Parameters: {"pf_order"=>{"receiver_status"=>"Completed"}}

如果您想坚持使用RESTful路线(我坚信您应该这样做),您的请求应该转到/pf_orders/:id/update_receiver_status

您可以将路线更改为:

patch 'pf_orders/:id/update_receiver_status', as: 'update_receiver_status'

或只是为您的pf_orders资源添加自定义路线:

resources :pf_orders do
  patch :update_receiver_status, on: :member
end

最后要做的是在javascript中检索订单的ID。这已经反映在您的表单的操作网址中,因此从那里检索它会更容易。

jQuery ($) ->
  $(document).ready ->
    $("#pf_order_receiver_status").bind 'change', ->
      $.ajax
        type: 'PATCH'
        url: $('#pf_order_receiver_status').closest('form').attr('action')
        data: 'pf_order[receiver_status]=' + $('#pf_order_receiver_status').val()

答案 1 :(得分:1)

以下是我如何正确使用它的方法:

pf_orders_controller.rb

white-space: nowrap; 

_pf_order.html.erb

摆脱def update_receiver_status @pf_order = PfOrder.find(params[:id]) if @pf_order.update_attributes(pf_order_params) render json: @pf_order.as_json, status: :ok else render json: {pf_order: @pf_order.errors, status: :unprocessable_entity} end end def pf_order_params params.fetch(:pf_order, {}).permit(:sequence_number, :message_guid, :hl7_document, :download, :post_status_code, :patient_id, :receiver_status) end

form_for

我从<%= label :receiver_status, 'Status:' %> <%= select_tag :receiver_status, options_for_select(receiver_statuses, pf_order[:receiver_status]), onchange: "$.post('#{update_receiver_status_pf_order_path(pf_order)}', {'_method':'patch', 'pf_order[receiver_status]':this.value} );", class: 'form-control' %>

中删除了jQuery

的routes.rb

pf_orders.coffee

感谢Alexandre Angelim的正确路线并指出了我正确的方向。