Question

I have 3 elements and one form with a button:

<input type="submit" value="Follow All" class="follow_all">

<div id="page"> 
<div id="page01" class="pages"> page 1 </div>
<div id="page02" class="pages"> page 2 </div>
<div id="page03" class="pages"> page 3 </div>
</div>

When I click in submit button, the form action, call to the file create.js.erb.

In this file I have:

var $divs = ("#page .pages");
$($divs).replaceWith("<%= escape_javascript(render(:partial => 'replace_all_divs'))%>");

In the partial _replace_all_divs.html.erb I have:

<% @posts.each do |post| %>
<%= post.id   %>
<% end %>

I want replace each div content (page 1, page 2 and page 3) with post id.

The problem is that I get for each div the 3 ids of post.id:

I get a bad result :(:

<div id="page"> 
<div id="page01" class="pages"> 123 </div>
<div id="page02" class="pages"> 123 </div>
<div id="page03" class="pages"> 123 </div>
</div>

I want get the next result:

<div id="page"> 
<div id="page01" class="pages"> 1 </div>
<div id="page02" class="pages"> 2 </div>
<div id="page03" class="pages"> 3 </div>
</div>

Answer 1

As you’re using "#page .pages" as the selector, the replaceWith method is executed three times, each one with the content produced by _replace_all_divs.html.erb (a loop that concatenates all your ids => “123”).

You’d better use "#page" as the selector and replace its content with new divs.

create.js.erb :

$('#page').empty().append('<%= render(:partial => 'replace_all_divs')%>');

_replace_all_divs.html.erb :

<% @posts.each do |post| %>
 <div id="page<%= post.id.to_s.rjust(2, '0') %>" class="pages"><%= post.id %></div>
<% end %>