How can I re-render more than 2 partials at once using Ajax

Question

I have a rails app, which is constructed by three parts such as navigation above, main content, and side menu.

I already implemented follow un-follow button in my main content.
It's working with Ajax perfectly so far.

basically if I press follow button, follow action in users_controller.rb will be called and changes follow flag, and then it calls follow.js to re-render follow button as partial.
Beside that, in side menu, it has the number of people whom current_user is following.
This number also should be refreshed right after follow action was executed.

To refresh more than 2 partials at once. How can I archive this?

controllers/users_controller.rb

....

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

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

...

views/users/follow.js.erb

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

views/users/unfollow.js.erb

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

views/layouts/_menu.html.erb

          <% if user_signed_in? %>
                  <li><%= link_to(following_user_path(current_user.username)) do %>
                  <i class="icon-heart"></i>Following
                  <%= '(' + current_user.all_following.count.to_s + ')' if current_user.all_following.count > 0 %>
                  <% end %>
                  </li>    

                  <li><%= link_to(followed_user_path(current_user.username)) do %>
                  <i class="icon-heart"></i>Followed by
                  <%= '(' + current_user.followers.count.to_s + ')' if current_user.followers.count > 0 %>
                  <% end %>
                  </li>
              <% else %>
                  <li><%= link_to sanitize('<i class="icon-heart"></i> ') + "Following", following_user_path %></li>                                            
                  <li><%= link_to sanitize('<i class="icon-heart"></i> ') + "Followed by", followed_user_path %></li>                                           

              <% end %>

Answer 1

# dedicate partial _following_number.html.erb
<span id="following_number">
  <% if user.followers.count > 0 %>
    <%= '(' + user.followers.count.to_s + ')' %>
  <% end %>
</span>


# update layout with partial:

<li><%= link_to(followed_user_path(current_user.username)) do %>
<i class="icon-heart"></i>Followed by
  <%= render :partial => "following_number", :user => current_user %>
<% end %>

# follow.js.erb && unfollow.js.erb:
...
$(document).find("#following_number").replaceWith('<%= escape_javascript(render("following_number", :user => @user, :formats => [:html])) %>')

More elegant with helper:

def following_number(user)
  user.followers.count > 0 ? "(#{user.followers.count})" : nil
end

# then put spans to layout:
<span id="following_number"><%= following_number(current_user) %></span>

# and js:
$(document).find("#following_number").html('<%= escape_javascript(following_number(@user)) %>')

Answer 2

One simple way of doing this is to return a .js from rails and have your view execute this script, which will have the actions to update/replace your view.

For example this simply renders three partials and later using jQuery replaces the content in your view. Lets say the action is my_action so you will place the following code in your my_action.js.erb:

$("#content_1").html("<%= escape_javascript(render('partial_1'))%>");
$("#content_2").html("<%= escape_javascript(render('partial_2'))%>");
$("#content_3").html("<%= escape_javascript(render('partial_3'))%>");

This example can be extended the way you want or need. You can also render json for your models and call a function to update them in the view.

Answer 3

You could create a new action that render_to_string both of those partials and format them into a json object:

{
div_id_1: "<ul....." ,
div_id_2: "<div...."
}