JQuery и Rails - делаем кнопку "like it" со счетчиком

В последнее время все больше и больше отдаю предпочтение JQuery в реализации разнообразных финтифлюшек для сайта. Это действительно мощный и впечатляющий инструмент, с помощью которого можно реализовать практически любую бредовую идею - красиво и по-настоящему эффектно! В общем, чем больше познаю JQuery, тем увереннее и монструознее (в лучшем смысле этого непонятного слова) себя ощущаю)

Началось мое знакомство с JQuery с идеи прикрутить на http://ptica-govorun.ru/ форму для анонимного голосования за понравившиеся цитаты. Обязательное условие реализации - наличие счетчика и его обновление без перезагрузки страницы. Сделать это оказалось очень просто...

1. Добавляем в Gemfile:

gem "jquery-rails"

и выполняем bundle install.

2. Выполняем

rails generate jquery:install

после чего в public/javascripts/ должны появиться библиотеки JQuery и файл application.js.

3. Открываем application.js и пишем функцию для обработки submit-событий:

jQuery.ajaxSetup({
'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})
jQuery.fn.submitWithAjax = function() {
this.submit(function() {
$.post(this.action, $(this).serialize(), null, "script");
return false;
})
return this;
};

4. Добавляем в application.html.erb:

<script src='/javascripts/jquery.js' type="text/javascript"></script>

5. Все подготовительные действия выполнены, теперь можно приступить непосредственно к реализации. Итак, сделаем такую кнопку со счетчиком :-) (0). Значение счетчика в скобках будет увеличиваться при клике пользователей. Начнем с контроллера.

Контроллер для цитат называется у меня Quote. Добавляю в него:

def add_smile
@quote = Quote.find(params[:id])
respond_to do |format|
format.html {redirect_to :back}
format.js
end
end

6. Вносим изменения в views/quotes/_quote.html.erb - добавляем div с кнопкой и счетчиком:

<div id="rating-group">
<%= button_to ":-)", { :action => 'add_smile', :controller => 'quotes', :id => quote.id }, :id => 'add_smile', :type => 'submit', :remote => true %>
<p id='smile_result_<%= quote.id %>' class='smile_result'>(<%= quote.smile_count %>)</p>
</div>

7. В директории views/quotes/ создаем новый файл, под названием add_smile.js.erb, в котором прописываем:

<% @quote.smile_count = @quote.smile_count.to_i + 1 %>
<% @quote.update_attributes(params[:quote]) %>
document.getElementById('smile_result_<%= @quote.id %>').innerHTML = '(<%= @quote.smile_count %>)';
document.getElementById('smile_result_<%= @quote.id %>').style.color = 'green';

В первых двух строках - увеличение счетчика, и сохранение нового значения в базе данных. В третьей строке - обновление счетчика на странице. В четвертой строке - изменение цвета счетчика на странице, чтобы обозначить, что действие было совершенно.

Все. Посмотреть, как это работает можно здесь http://ptica-govorun.ru/