Render a Show Page Inside an Index Page on a Modal - ruby-on-rails

Question

Say I have a Scaffolded Post with just one field, body.I would like to render the show page for any post by clicking show only instead of loading a separate show page, It loads it inside a modal. Kinda like twitter does

Answer 1

I assume you are using Bootstrap and you would like to use a modal. You will have the list view have the modal with some links.
Now to get the data, we can do it either on page load (lets say data attributes), or on demand through XHR.
I like to get things on demand... so lets make a modal and some links.
<% #posts.each do |post| %>
<%= link_to post.title, post_path(post), remote: true, data: { method: 'get' } %>
<% end %>
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Then in the controller we need to make it fire...
class PostsController < ApplicationController
def show
#post = Post.find(params[:id])
respond_to do |format|
format.js
end
end
end
In the view show.js.erb we will do some thing like this.
$('h4.modal-title').html("<%= #post.title %>");
$('.modal-body p').html("<%= #post.body %>");
$('.modal').modal();
Let me know if it has bugs, I just wrote it out of my head and the modal code came right from Bootstrap with no editing. You will probably have to refactor them to make sense.

Answer 2

You cannot render the entire show page directly, but you can do this with a partial. I would recommend creating a partial that encapsulates all of the view information that is common to your show page and your modal. You can then reference that partial in both your show page and your modal reducing the amount of duplicated code.
Partials are normal view files with an underscore as the first character of the file name. For example: _post.html.erb.
You render the partial inside other views with the render command:
#show.html.erb
<%= render 'post' %>
I would also recommend the Rails Guide on Layouts and Rendering