如何使用jQuery更新Rails模型上的字段？

Question

I have a model, Player, that has a field total_points.

On my home page, I have the players name and total_points:

<div id="player1">
  <h3><%= "#{@player1.first_name} #{@player1.last_name} (#{@player1.total_points})" %></h3>
</div>

I would like to have the total_points field on @player1 increase by 1 every time the player's name is clicked by the user. My jQuery (coffeescript) so far is:

/home.js.coffee
jQuery ->
  pointForPlayer1 = (e) ->
    e.preventDefault()
    console.log('player 1 clicked')

  $('#player1').click pointForPlayer1

This works (as in, it logs the message to the console), but I'm not sure how to have the click increase @player1.total_points by 1 and then re-render the message above (preferably without reloading the whole page). Thanks!

Answer 1

You'll have a better time if you adjust your HTML so that you can find the total points easily. Something like this:

<div id="player1">
  <h3>
    <%= "#{@player1.first_name} #{@player1.last_name}" %>
    (<span class="total"><%= @player1.total_points %></span>)
  </h3>
</div>

Then you'd probably want to controller server side to increment the player's total points and send back the new total. That would leave you with something like this:

$ ->
  $('#player1').click (e) ->
    e.preventDefault()
    $.post 'whatever-the-url-is', (new_total) ->
      $('#player1 .total_points').html(new_total)

If you're not storing anything on the server then you could do it like this:

$ ->
  $('#player1').click (e) ->
    e.preventDefault()
    $t = $('#player1 .total_points')
    $t.html(parseInt($t.html(), 10) + 1)

Answer 2

Since you have opted to use jquery (which I think may be the greatest invention of the computing age :) ), this is relatively easy.

You'll want to use the post command, which will post back to your app using AJAX. So, in your case the coffeescript would be $('#player1').click -> $.post(route, data, success method, datatype) per the JQuery docs

The success method can then take the return data and deal with it. If your html changes at this point, you can return html and replace the appropriate chunk of html with JQuery. You can also return JSON, XML, etc. as you wish. I think in this case it sounds like returning a chunk of html may be appropriate. You'll need an appropriate view to render to do it.