1

In index.html.erb, I made the button that switches from Follow to Un-follow, Follow to Un-follow back and forth when it's pressed.
It's working perfect but when I press the button, it makes another new line at right below of the button that's shown first when the page is loaded.
Why does it? and How can I remove or fix this new line??

Here are images!

image 1. When the page is loaded

When the page is loaded

image 2. When the button is pressed first time after loaded

when the button is pressed first time

image 3. When the button is pressed second time after loaded

when the button is pressed second time

My codes are

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

<% 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/follows/create.js.erb

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

views/follows/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

<%- 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 class="follow_user" data-user-id="<%= user.id %>">
  <%= 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>

html when the page is loaded(image 1)

<div class="follow_user" data-user-id="3">
        <form action="/users/3/follows/133" class="button_to" data-remote="true" method="post"><div><input name="_method" type="hidden" value="delete" /><input class="btn" type="submit" value="Un-Follow" /><input name="authenticity_token" type="hidden" value="eVjePZ0ajS3NfXJLDBkELnpNwyt8k1f59FiT8iv/Xb8=" /></div></form>

</div>

html when the button is pressed(image 3)

<div class="follow_user" data-user-id="3">
        <form action="/users/3/follows/133" class="button_to" data-remote="true" method="post"><div><input name="_method" type="hidden" value="delete" /><input class="btn" type="submit" value="Un-Follow" /><input name="authenticity_token" type="hidden" value="S92bRkGcbMz/puQvia4m7IOtrTsO2iCThiaHlBaXmJU=" /></div></form>

</div>
4

0 に答える 0