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
image 2. When the button is pressed first time after loaded
image 3. When the button is pressed second time after loaded
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>