Shawn Wilson Shawn Wilson - 3 months ago 26
Javascript Question

Application Wide Modal Issue rails 5 Bootstrap 3

I have setup modals for my new and edit actions in my users controller. To keep display consistency I would like my user show page to appear in a modal as well.

Right now users access their show page via

<li><%= link_to "View Profile", current_user %></li>


Link in my nav-bar.

I would like to set this link to display the desired modal for the show action in my user controller.

Im stuck, I've tried to google how to do this but I don't think I am asking the right questions. If anyone can direct me to a resource or give me general outline of how to achieve this it would be greatly appreciated!

I realize this question is a bit Vague but i'm not sure how else to proceed.

Answer

You can use rails js if you only want to load the profile when clicked.

1. Set remote: true on the link tag.

<li><%= link_to "View Profile", current_user, remote: true %></li>

2. Create a partial containing the modal so we can render it via rails js.

app/views/users/_show.html.erb

<%= content_tag :div, class: "modal fade", id: dom_id(@user, :modal) do %>
  <div class="modal-dialog">
    <div class="modal-content">
      Lorem ipsum...
    </div>
  </div>
<% end %>

3. Append the partial containing the modal and then toggle it using rails js. Rails will look for the corresponding .js.erb view when remote: true is set.

app/views/users/show.js.erb

$('body').append('<%= j render "users/show" %>');  // Append modal
$('#<%= dom_id @user, :modal %>').modal('toggle'); // Toggle modal