CODEWITHSUNDEEP
javascriptjquerycssruby-on-railstwitter-bootstrap
Shawn Wilson
Shawn Wilson

Reputation: 1351

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.

Upvotes: 0

Views: 873

Answers (2)

codyeatworld
codyeatworld

Reputation: 1283

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

Upvotes: 1

Bartłomiej Gładys
Bartłomiej Gładys

Reputation: 4615

maybe something like this:

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <%= render 'users/show', user: current_user %>
    </div>

  </div>
</div>

Upvotes: 1

Related Questions