How to open page as modal window in Rails 4? - ruby-on-rails-4

Question

I have an edit action that I would like to put on a modal window on my App, and when it's closed I need to refresh a part of my view.
Does anybody knows how can I do that using Rails 4?

Answer 1

Lets assume you want to open the user edit page in a modal. Here's the solution I prefer:
# Create a ajax link somewhere that opens the user modal:
<%= link_to user.name, edit_user_path(user), remote: true %>
# This link calls your controller action:
class UsersController < ApplicationController
def edit
#user = User.find(params[:id])
render_js_modal(:any_id, 'edit')
end
end
class ApplicationController
def render_js_modal(id, partial, options)
#id = id
#partial = partial
#options = options
respond_to do |format|
format.js { render 'application/render_modal' }
end
end
end
# The view depends on which CSS library you are using. This
# example is if you use semantic ui. If you use something like
# bootstrap you will probably need to create a bit more html in the JS.
# views/application/render_modal.js.erb:
$(body).append('<div id="<%= #id %>"></div>');
var element = $('#<%= #id %>');
element.html('<%= j(render partial: #partial, #options) %>');
element.modal('show');
Hope this helps. If you get any errors, remember to look in the rails server log for details. For JS details look in the browser console. Note you can pass locals to the partial in the options param. You can create many other useful methods like this:
render_js_modal_hide: hide a modal on screen by id. Useful when the user is created successfully. Consider replacing the page flash messages with the JS response as well.
render_js_content_replace: replaces a div on the page with the content of provided partial. This is useful for replacing the content of a modal if there are validation errors.
etc.

Answer 2

I've done this in that way (using Slim):
.text-center = link_to 'Visualizar Documentos', 'Visualizar Documentos', class: 'btn btn-default btn-primary btn-large', "data-toggle" => "modal", "data-target" => "#meioambiente"
.modal.fade id="meioambiente" tabindex="-1" role="dialog" aria-labelledby="meioambiente-label" aria-hidden="true"
And everything worked perfectly. Thanks!

Answer 3

Twitter Bootstrap and ZURB Foundation both have modal components. You will need to use JavaScript to update the DOM.
Codecademy is a free online learning website and have great tutorials to learn JavaScript and jQuery. I would also suggest Code School since they have a free course on JavaScript, jQuery and Angular.js.