Rails display bootstrap modal of index from another model - ruby-on-rails

Question

I have two models groups and shots. From my groups #show page, I want a modal window that will allow me to display a list of all my shots. Here is the relevant code...
app/views/groups/show.html.erb
<%= link_to "Add Exsisting Shot", shots_path, id: "shot-modal", remote: true %>
app/views/shots/modal.js.erb
$("#shot-modal").html("<%= escape_javascript(render 'modal') %>")
$("#shot-modal").modal("show")
app/controllers/shots_controller.rb
def index
#shots = Shot.all
respond_to do |format|
format.html # index.html.erb
format.js # index.html.erb
format.json { render json: #shots }
end
end
When I click the 'Add Existing Shot' link, I do a a model that sort of turns the who screen gray, but I am not getting any content. I can click anywhere on the screen, it it brings me back to my show page. I'm also not getting any errors in the console.
EDIT
app/views/shots/_modal.html.erb
<div class="modal fade" id="shot-modal" tabindex="-1" role="dialog" aria-labelledby="shot-modal-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="shot-modal-label">Modal title</h4>
</div>
<div class="modal-body" id="shot-modal-body">
<table>
<tr>
<th>Name</th>
<th>Comedian</th>
<th></th>
<th></th>
<th></th>
</tr>
<% #shots.each do |shot| %>
<tr>
<td><%= shot.name %></td>
<td><%= shot.comedian.name %></td>
<td><%= image_tag shot.pic.url(:thumb) %></td>
</tr>
<% end %>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Answer 1

Two things:
1 - If you have a modal like this:
<div class="modal fade" id="product-modal" tabindex="-1" role="dialog" aria-labelledby="product-modal-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="product-modal-label">Modal title</h4>
</div>
<div class="modal-body" id="product-modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Then you should not use $("#product-modal").html(... because you will overwrite a lot of the important divs in the modal. You should use $(".modal-body","#product-modal").html(... or set the id for the modal-body as above and use $("#product-modal-body").html(....
2 - The render won't work. When you run the render command like that from a view, it is looking for a partial. So your JavaScript should actually look like something like this:
$("#product-modal").html("<%= escape_javascript(render 'allshots') %>")
And then you should put the HTML for displaying your shots in app/views/shots/_allshots.html.erb.