如何使用AJAX

Question

方案

我已经创建学习Rails和引导一个简单的应用程序中的Rails执行POST操作。这个应用程序的功能是允许用户为名人提供昵称，并且也可以使用昵称。您可以在http://celebnicknames.herokuapp.com

检查我有一个按钮的link_to在我家/index.html.erb张贴喜欢的名人如：在我home_controller.rb

<%= 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 %> 

相应的代码该职位的方法是：

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问题，并提供链接来解释如何使用Rails使用AJAX。

编辑

这里是整个家用/ 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的id属性昵称。 Rails有一个helper method这为div_for。所以，你可以改变上面的代码如下：

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

这将产生具有id像nickname_1一个div（如果昵称的这个ID为1）。

现在在你的JavaScript模板，你可以轻松地定位需要更新的DIV：

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

的ajax:success结合是不必要的，因为在这里你正在呈现一个JavaScript模板。在模板中，您可以访问控制器中设置的实例变量 - 就像您可以从HTML模板中获取一样。以上代码旨在用新计数替换包含喜欢数的div的内容。