Using AJAX in a rails app to update a model field without using a form

Question

I have a table that looks like this:

enter image description here

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!

mechanicalfish · Accepted Answer · 2013-12-14 23:22:15Z

8

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.

answered Dec 14, 2013 at 23:22

mechanicalfish

12.9k3 gold badges49 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jackerman09 Over a year ago

Perfect, I've been searching for something like this for ages. Thanks!

okliv · Accepted Answer · 2013-12-14 23:22:33Z

0

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)

edited Dec 14, 2013 at 23:22

answered Dec 14, 2013 at 23:17

okliv

3,95932 silver badges49 bronze badges

Collectives™ on Stack Overflow

Using AJAX in a rails app to update a model field without using a form

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related