Как выполнить операцию POST в Rails с использованием AJAX

Question

Сценарий

Я создал простое приложение для обучения Rails и Bootstrap. Что это приложение делает, это позволяет пользователям давать псевдонимы знаменитостям и, как и прозвища. Вы можете проверить его на http://celebnicknames.herokuapp.com

У меня кнопка link_to для размещения подобных за знаменитость в моем дома/index.html.erb как:

<%= link_to home_updatelike_path(id: nickname.id, search: @search), method: :post, remote: true, class: "update_like btn btn-xs btn3d pull-right" do %> 
    <i class="glyphicon glyphicon-thumbs-up"></i> 
<% end %> 

соответствующий код в моем home_controller.rb для метода пост является:

def updatelike 
     @like = Like.new(:nickname_id => params[:id], :ip_address => request.remote_ip) 
     @like.save 

    respond_to do |format| 
     format.html { redirect_to root_path("utf8"=>"✓", "search"=>params[:search], "commit"=>"Search") } 
     format.json { head :no_content } 
     format.js { render :layout => false } 
    end 
end 

код в моем updatelike.js.erb как:

$('.update_like').bind('ajax:success', function() { 

}); 

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

Проблема:

Всякий раз, когда я нажимаю кнопку, операция базы данных выполняется, но изменение не отражается на странице, если я не перезагрузить его. Прошу вас посоветовать по этому вопросу noob, а также предоставить ссылки на ресурсы, которые объясняют использование AJAX с Rails.

Редактировать

Вот весь дом/index.html.erb

<div class="jumbotron col-md-6 col-md-offset-3"> 
    <h1 class='text-center'>Nicknamer</h1> 
</div> 

<div class="container"> 

     <div class="row"> 
      <div class="col-sm-8 col-sm-offset-2 bottom50"> 
       <%= form_tag(root_path, :method => "get", id: "search-form", type: "search") do %> 
       <div class = "form-group" > 
        <div class = "col-sm-9 " > 
         <%= text_field_tag :search, params[:search], placeholder: "Name", class: "form-control" %> 
        </div> 
        <div class = "col-sm-3" > 
         <%= submit_tag "Search", class: "btn btn-default btn-block btn-success"%> 
        </div> 
       </div> 
       <% end %> 
      </div> 
     </div> 

     <% @names.each do |name| %> 
     <div class="col-md-6 col-xs-8 col-md-offset-3 col-xs-offset-2 bottom50"> 

      <!-- ===== vCard Navigation ===== --> 
      <div class="row w"> 
       <div class="col-md-4"> 
        <% if name.sex == true %> 
         <%= image_tag("mal.jpg", :alt => "", class: "img-responsive") %>  
        <% else %> 
         <%= image_tag("fem.jpg", :alt => "", class: "img-responsive") %>  
        <% end %> 
       </div><!-- col-md-4 --> 

      <!-- ===== vCard Content ===== --> 
       <div class="col-md-8"> 
        <div class="row w1"> 
         <div class="col-xs-10 col-xs-offset-1"> 
         <h3><%= "#{name.name}" %></h3> 
         <hr> 
         <h5>Also known as</h5> 

          <% name.nicknames.each do |nickname| %> 
           <div class = "row w2 bottom10"> 
            <% if nickname.name_id == name.id %> 
             <div class="col-xs-7"> 
              <%= nickname.nickname %> 
             </div> 
             <div class="col-xs-3 text-right"> 
              <%= pluralize(nickname.likes.count, 'like') %> 
             </div> 
             <div class="col-xs-1"> 
              <%= link_to home_updatelike_path(id: nickname.id, search: @search), method: :post, remote: true, class: "update_like btn btn-xs btn3d pull-right" do %> 
              <i class="glyphicon glyphicon-thumbs-up"></i> 
              <% end %> 
             </div>          
            <% end %><!-- if --> 
           </div><!-- row w2 --> 
          <% end %><!-- do --> 

          <div class = "row w3 bottom30"> 
          <%= form_for @addnickname, as: :addnickname, url: {action: "addnickname"} do |f| %> 
           <div class = "form-group" > 
            <%= f.hidden_field :name_id, :value => name.id %> 
            <%= f.hidden_field :search, :value => @search %> 
           <div class = "col-xs-9"> 
            <%= f.text_field :nickname , :required => true, class: "form-control" %> 
           </div> 
           <div class = "col-xs-3"> 
            <%= f.submit "Add", class: "btn btn-default btn-info"%> 
           </div> 
           </div> 
          <% end %> 
          </div> 

         </div><!-- col-xs-10 --> 
        </div><!-- row w1 --> 
       </div><!-- col-md-8 --> 
      </div><!-- row w --> 
     </div><!-- col-lg-6 --> 
     <% end %> 
    </div><!-- /.container --> 

и это вся home_controller.rb

class HomeController < ApplicationController 
    def index 
    @addnickname = Nickname.new 
    if params[:search] 
     @search = params[:search] 
     @names = Name.search(params[:search]) 
    else 
     @names = Name.all 
    end 
    end 

    def addnickname 
    @addnickname = Nickname.new(:nickname => params[:addnickname][:nickname], :name_id => params[:addnickname][:name_id]) 

    if @addnickname.save 
     redirect_to root_path("utf8"=>"✓", "search"=>params[:addnickname][:search], "commit"=>"Search") 
    else 
     render :new 
    end 
    end 

    def updatelike 
     @like = Like.new(:nickname_id => params[:id], :ip_address => request.remote_ip) 
     @like.save 

    respond_to do |format| 
     format.html { redirect_to root_path("utf8"=>"✓", "search"=>params[:search], "commit"=>"Search") } 
     format.json { head :no_content } 
     format.js { render :layout => false } 
    end 
    end 

private 
    def addnickname_params 
    params.require(:addnickname).permit(:name_id, :nickname, :search) 
    end 
end 

Answer 1

Итак вам нужен способ, чтобы определить DIV с номером, который необходимо изменить:

<div class="col-xs-3 text-right"> 
    <%= pluralize(nickname.likes.count, 'like') %> 
</div> 

Самый простой способ сделать это будет иметь id атрибут на div, что соответствует (уникальный) идентификатор базы данных из ник. Rails имеет helper method для этого: div_for. Таким образом, вы могли бы изменить приведенный выше код для этого:

<%= div_for(nickname, class: "col-xs-3 text-right") do %> 
    <%= pluralize(nickname.likes.count, 'like') %> 
<% end %> 

Это будет генерировать div с id как nickname_1 (если это идентификатор ника 1).

Теперь в вашем яваскрипта шаблона вы можете легко настроить таргетинг на DIV, который должен быть обновлено:

$("nickname_#{@like.nickname.id}").html(@like.nickname.likes.count); 

ajax:success связывание ненужно здесь, так как вы рендеринг яваскрипта шаблона.В шаблоне вы можете получить доступ к переменным экземпляра, установленным в контроллере - так же, как вы можете, из HTML-шаблона. Вышеприведенный код предназначен для замены содержимого div, которое содержит кол-во счетов с новым счетчиком.