在Rails应用程序中使用AJAX无需使用表单即可更新模型字段

Question

I have a table that looks like this:

Each row is from this partial:

<div class="row chord-table-row" id= <%= "chord-#{chord.id}" %>>
    <div class="small-1 columns"><%= chord.id %></div>
    <div class="small-2 columns"><%= chord.name %></div>
    <div class="small-3 columns"><%= chord.description %></div>
    <div class="small-3 columns"><%= chord.user.username %></div>
    <div class="small-3 columns"><%= link_to 'Approve', approve_path, class: 'chord-approval-button' %></div>
</div>

How can I make the 'Approve' button go to the approve action in the chords_controller , which will update the state field of the Chord, and then run the JS/Coffeescript in approve.js.coffee ?

I would (ideally) like to use remote: true in the 'Approve' link, but I am not sure how to ensure that the controller knows which Chord is being approved.

Right now the #approve action looks like this:

def approve
  chord.approve
  # this method is on the Chord model and is working
  respond_to do |format|
    format.js
  end
end

I'd like to do this in the right "rails" way, so any guidance/advice would be much appreciated! Thanks!

Answer 1

Add a member route for approval:

resources :chords do
  member do
    post 'approve'
  end
end

Then the url helper will accept chord / chord id. You can use remote: true just like you want to:

<%= link_to 'Approve', approve_chord_path(chord), remote: true, method: :post %>

Chord id will arrive in params as params[:id] so you can do this in your controller:

@chord = Chord.find(params[:id])
@chord.approve

Your respond_to block looks good and your JavaScript will run.

Answer 2

view:

<%= link_to_function 'Approve', "$.get('#{approve_path}', {chord_id: #{chord.id}})", class: 'chord-approval-button' %>

approve.js:

$('dom#u_need_to_change').html('<%= j render partial: 'partial_you_need_to_render' %>')

that is all

of course, you need correct routes ( get , or you can better change it to post , not really matters) and approve.js has to be in right place ( views/chords folder, i guess)