Ajax动作不会在外观上反映出来，而是在价值上反映出来.为什么? [英] Ajax action won't reflect on appearance but the value. Why?

问题描述

我正在使用Rails3.现在尝试像在Twitter上一样在index.html.erb中实现关注按钮.
它显示成员列表及其关注按钮.
看起来还不错，但是如果我按下其中任何一个跟随按钮，外观都不会改变.
应该立即进行以下更改，以取消关注.
我不知道为什么会这样.但是，如果我重新加载页面，它将显示正确的状态.

I'm using Rails3. Now trying to implement follow button in index.html.erb just like twitter.
It shows member list and their follow buttons.
It looks okay but if I press any of those follow button, appearance doesn't change.
It should changes follow to un-follow right away.
I have no idea why it does. But if I reload the page, it shows correct status.

follows_controller.rb

follows_controller.rb

class FollowsController < ApplicationController

  def create
    @user = User.find(params[:user_id])
    current_user.follow(@user)
    respond_to do |format|
      format.js {render :action=>"create.js"}
      end
  end

  def destroy
    @user = User.find(params[:user_id])
    current_user.stop_following(@user)
    respond_to do |format|
      format.js {render :action=>"destroy.js"}
  end
end

end

views/users/_follow_user.html.erb

views/users/_follow_user.html.erb

<% unless user == current_user %>
    <% if current_user.following?(user) %>
        <%= button_to("Un-Follow", user_follow_path(user.to_param, current_user.get_follow(user).id), 
        :method => :delete, 
        :remote => true, 
        :class => 'btn') %>
    <% else %>
        <%= button_to("Follow", user_follows_path(user.to_param), 
        :remote => true, 
        :class => 'btn btn-primary') %>
    <% end %>
<% end %>

views/users/create.js.erb

views/users/create.js.erb

$('.follow_user[data-user-id="<%=@user.id%>"]').html('<%= escape_javascript(render :partial => "follow_user", :locals => {:user => @user}) %>');
#jQuery

views/users/destroy.js.erb

views/users/destroy.js.erb

$('.follow_user[data-user-id="<%=@user.id%>"]').html('<%= escape_javascript(render :partial => "follow_user", :locals => {:user => @user}) %>');
#jQuery

views/users/index.html.erb

views/users/index.html.erb

<%- model_class = User.new.class -%>
<div class="page-header">
  <h1><%=t '.title', :default => model_class.model_name.human.pluralize %></h1>
</div>
  <% @from %>
  <h3>tag cloud</h3>
  <% tag_cloud(@tags, %w(css1 css2 css3 css4)) do |tag, css_class| %>
    <%= link_to tag.name, {:action=>'index', :tag=>tag.name}, :class => css_class%>
  <% end %> 


<%= paginate @users %>

<table class="table table-condensed">
  <thead></thead>
    <tbody>
    <% @users.each do |user| %>  
      <div class="memberListBox">
        <div class="memberList">
            <p class="name"><span><%= user.user_profile.nickname %></span>(<%= user.user_profile.age %>)</p>
            <p class="size"><%= user.username %></p>
            <p class="img">
            <% if user.user_profile.user_avatar? %>
            <%= image_tag(user.user_profile.user_avatar.url(:thumb),:height => 100, :width => 100, :class => 'img-polaroid' ) %>
            <% else %>
            <%= image_tag('nophoto.gif',:height => 100, :width => 100, :class => 'img-polaroid' ) %>
            <% end %>
            </p>
            <div class="introduction">
                <%= user.user_profile.introduction %>
            </div>

<% if user_signed_in? && current_user!=user %>          
  <div id="follow_user">
    <%= render :partial => "follow_user", :locals => {:user => user} %>
  </div>
<% end %>

  <%= link_to sanitize('<i class="icon-pencil icon-white"></i> ') + 'Message', new_messages_path(user.username), :class => 'btn btn-primary'  %>


                <%= link_to sanitize('<i class="icon-user icon-white"></i> ') + 'Profile', show_user_path(:username => user.username, :breadcrumb => @from), :class => 'btn btn-info' %>              

        </div>
    </div>
   <% end %>
  </tbody>  
</table>

回复内容

$('#follow_user').html(' <form action=\"/users/1/follows\" class=\"button_to\" data-remote=\"true\" method=\"post\"><div><input class=\"btn btn-primary\" type=\"submit\" value=\"Follow\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"G/taOUeWy2gumhWUi10cPvECAmYLQdhQ2/eGGMJwvPE=\" /><\/div><\/form> \ n');

推荐答案

将用户ID添加到属性data-user-id并添加类follow_user

Add the user id to the attribute data-user-id and add the class follow_user

<div class="follow_user" data-user-id="<%= user.id %>">
  <%= render :partial => "follow_user", :locals => {:user => user} %>
</div>

这篇关于Ajax动作不会在外观上反映出来，而是在价值上反映出来.为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！