M. 9 Coffee - Evanto/qna GitHub Wiki

app/assets/javascripts/votes.coffee:

votes = ->
  $(document).on 'click', '.vote-link', (e) ->
    e.preventDefault();

    value = $(this).data('value')
    votable_id = $(this).data('votableId')
    votable_type = $(this).data('votableType')

    $.ajax
      type: "POST"
      url: "/votes"
      data:
        value: value
        votable_id: votable_id
        votable_type: votable_type
      success: (rating) ->
        $('#' + votable_type.toLowerCase() + '_' + votable_id + ' .reset-vote-link').show()
        $('#' + votable_type.toLowerCase() + '_' + votable_id + ' .vote-link').hide()
        $('#' + votable_type.toLowerCase() + '_' + votable_id + ' .rate').html(rating)
      error: ->
        $('div.errors').html('Something is wrong.')

  $(document).on 'click', '.reset-vote-link', (e) ->
    e.preventDefault();

    votable_id = $(this).data('votableId')
    votable_type = $(this).data('votableType')

    $.ajax
      type: "DELETE"
      url: "/votes/reset?" + $.param({"votable_id": votable_id, "votable_type" : votable_type})
      success: (rating) ->
        $('#' + votable_type.toLowerCase() + '_' + votable_id + ' .vote-link').show()
        $('#' + votable_type.toLowerCase() + '_' + votable_id + ' .reset-vote-link').hide()
        $('#' + votable_type.toLowerCase() + '_' + votable_id + ' .rate').html(rating)
      error: ->
        $('div.errors').html('Something is wrong.')

$(document).on('turbolinks:load', votes)
$(document).on('page:load', votes)
$(document).on('page:update', votes)

$.ajax - performs an Ajax request (an asynchronous HTTP request) url: "/votes" - a string containing the URL to which the request is sent

      data:
        value: value
        votable_id: votable_id
        votable_type: votable_type

• data to be sent to server (type: PlainObject or String or Array)

      success: (rating) ->
        $('#' + votable_type.toLowerCase() + '_' + votable_id + ' .reset-vote-link').show()
        $('#' + votable_type.toLowerCase() + '_' + votable_id + ' .vote-link').hide()
        $('#' + votable_type.toLowerCase() + '_' + votable_id + ' .rate').html(rating)

• a function to be called if the request succeeds

Создаем контроллер votes_controller.rb с экшенами create и destroy (т.к. будем создавать и удалять голоса), прописываем ответ через json. В routes.rb добавляем пути на них:

  resources :votes, only: [:create] do
    delete :reset, on: :collection
  end

Во вьюхе трем ссылкам прописываем классы, а у самого дива вопроса/ответа должен быть id. Тут же у этих ссылок приписываем data и style.

В votes.coffee создаем 2 ajax-запроса (обернуте в функции) на экшены контроллера, которые мы создали выше: для create с методом POST, для destroy - c DELETE. url-ы берем из rake routs - смотрим там сзданные ранее урлы для votes create, votes destroy. В success пишем, какую ссылку скрыть/показать и заменяем .rate на html(rating). В случае ошибки заменяем див ошибки на текст об ошибке.

Links:

jQuery.ajax()