Increment Rails model column with Ajax/Javascript

Question

I'm having trouble incrementing an integer column (plays) for the tracks model in a Rails music app. Users can play tracks in the app using buttons like this one:

<% @top_tracks.each do |track| %>
  <button class="track-play track-<%= track.id %>-play" onclick="playTrack(<%= track.to_json %>)">
    <i class="icon-play"></i>
  </button>
  ...
  [info about the track, such as <%= track.title %>]
  ...
<% end %>

And here are the relevant parts of the corresponding Javascript:

var player = document.getElementById('audio');

window.playTrack = function (track) {
    player.setAttribute('src', track.file_url);
    player.play();
};

I have read through answers to somewhat similar questions, such as this one, that suggest utilizing Ajax/Javascript, but I'm not sure how to do that to get the desired result in my case. I don't even know if Ajax/Javascript is the best way to achieve what I'm looking for.

What should happen is that every time a track is played and the playTrack() function is called, the value of the plays column for that track should be incremented by 1 and then (obviously) the new value for plays should be saved in the database.

score 1 · Accepted Answer · edited Sep 07 '15 at 05:39

1

In your every track button add a data attribute say, data-track

<% @top_tracks.each do |track| %>
  <button data-track="#{track.id}" class="track-play track-<%= track.id %>-play" onclick="playTrack(<%= track.to_json %>)">
    <i class="icon-play"></i>
  </button>

<% end %>

in your routes.rb lets say declare:

post '/update_track_info', as: 'update_track_info', to: 'tracks#update_track_info'

create an ajax request:

window.playTrack = function (track) {
    player.setAttribute('src', track.file_url);
    player.play();
    $.ajax({
      url: '/update_track_info',
      data: { track_id: $(this).data('track').val() },
      type: 'POST'
    }) 

};

Then on the controller action:

def update_track_info
 @track = Track.find(params[:track_id].to_i)
 @track.update_column(:plays, @track.plays.next)    
 render :nothing => true
end

edited Sep 07 '15 at 05:39

Andrew

472
2
24

answered Sep 06 '15 at 17:15

Emu

5,763
3
31
51

can you show me how to connect the url in the ajax request to the method in the controller? – Andrew Sep 06 '15 at 17:59
I'm getting a 400 (Bad Request) error. Looks like it's not recognizing the rails path in the url, because the GET url associated with the error is: `http://localhost:3000/%3C%=%20update_track_info_path()%20%%3E?track_id=14` – Andrew Sep 07 '15 at 04:24
where did you put the controller action? It should be written in `tracks_controller.rb` file. – Emu Sep 07 '15 at 04:31
The controller action is in the `tracks_controller.rb` file. It seems like the url being passed in by the ajax isn't coming through properly as noted by my last comment – Andrew Sep 07 '15 at 04:35
`get '/update_track_info', as: 'update_track_info', to: 'tracks#update_track_info'` – Emu Sep 07 '15 at 04:38
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/88969/discussion-between-andrew-and-emu). – Andrew Sep 07 '15 at 04:43

Increment Rails model column with Ajax/Javascript

1 Answers1