CODEWITHSUNDEEP
javascriptjqueryruby-on-rails-3modal-dialogdry
Nick Ginanto
Nick Ginanto

Reputation: 32190

How to have one html code for a partial that is rendered multiple times

I have a post model which has_many :comments. for each comment (generated with _comment.html.erb partial) I have a tiny star icon so that comment can be starred.

I want to open a modal form (bootstrap) for when the user clicks on the star.

I know how to create a modal. But if I put that code in the _comment partial it will get rendered for each comment.

is there a way to open a modal window for each comment without javascript (or maybe that is the only way)?

_comment:

<div id="comment-#{comment.id}>
<%= comment.content %>
<a href="#starModal" id="star"  data-toggle="modal"><i class="icon-star"> </i></a>
</div>

  <div id="starModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="starLabel" aria-hidden="true">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 style="text-align: center;">Star Me!</h3>
      </div>
      <div id="starpop">
        <%= render :partial => 'layouts/star_form' , :locals => {:comment => comment,:post => post} %>
      </div>
    </div>

post/show.html.erb

<div class="post">

<%= @post.body %>

<% @post.comments.each do |c| %>
<%= render :partial=>'comment', :locals=>{:comment => c, :post => @post} %>
<% end %>

</div>

is having that modal code the right approach or can it be improved in a DRY way (and also not heavy for the user (imagine post has hundred of comments in a page.. so for each comment to have twice its data just for a model?) ?

Upvotes: 1

Views: 103

Answers (1)

rails_has_elegance
rails_has_elegance

Reputation: 1692

How about you create, if you haven't already, an own resource for stars, with at least a "new" and a "create" action. Then your modal will be the new action loaded via ajax onclick on the star button.

<%= link_to "<img src='...' />".html_safe, new_star_path, remote: true %>

In your starscontroller new action:

...
respond_to do |format|
  format.js
end
...

Then create a new.js.erb:

$("#place_for_modal").html("<%= escape_javascript(render 'new') %>");
$('#starModal').modal('show')

Make your modal-div the _new.html.erb partial.

Upvotes: 2

Related Questions