How do you load any partial in a single modal - ruby-on-rails

Question

I'm trying to figure out to load a sign UP partial and a sign IN partial in the same bootstrap modal code in an effort to keep it dry.
How is that possible with my current situation?
<%= link_to "Sign in", :sign_in, id: "signin", "data-toggle" => "modal", "data-target" => "#sign-in" %>
modal partial
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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="myModalLabel">Sign In</h4>
</div>
<div class="modal-body">
<%= render "sessions/new" %>
</div>
</div>
</div>
</div>
New session partial
<div class="row">
<div class="span6 offset3">
<%= form_for(:session, url: sessions_path) do |f| %>
<%= f.label :email %>
<%= f.text_field :email %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.submit "Sign in", class: "btn btn-large btn-primary" %>
<% end %>
<p>New user? <%= link_to "Sign up now!", signup_path %></p>
</div>
</div>

Answer 1

I would render both partials and use javascript to show/hide the correct ones. Make sure in your signup partial you use the class signup in the outermost element and render that within render that right below your signin partial
<%= link_to "Sign in", :sign_in, id: "signin", "data-toggle" => "modal", "data-target" => "#sign-in" %>
<%= link_to "Sign in", :sign_in, id: "signup", "data-toggle" => "modal", "data-target" => "#sign-in" %>
<div class="row signin">
<div class="span6 offset3">
<%= form_for(:session, url: sessions_path) do |f| %>
<%= f.label :email %>
<%= f.text_field :email %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.submit "Sign in", class: "btn btn-large btn-primary" %>
<% end %>
<p>New user? <%= link_to "Sign up now!", signup_path %></p>
</div>
</div>
Javascript
$(document).ready(function() {
$("#signin").click(function() {
$(".modal .signup").hide();
$(".modal .signin").show();
});
$("#signup").click(function() {
$(".modal .signin").hide();
$(".modal .signup").show();
});
});
Another way
Another way to do it would be to use ajax to load your partial into the body of the modal. You'd want a controller action for it that simply renders a partial and has layout false so you don't get excess layout elements passed with it.
If you don't have a lot, you don't need to make it a new controller, but I just did that here
Javascript
$(document).ready(function() {
$("#signup").click(function() {
setModal("modals/signup");
});
$("#signin").click(function() {
setModal("modals/signin");
});
});
// Doesn't have to be in a function, but it's better to keep it dry.
// Could also add more configuration (like the selector it uses)
function setModal(url) {
$.get(url, function(data) {
$("#myModal .modal-body").html(data);
});
}
Controller
class ModalsController < ApplicationController
def signin
render partial: "sessions/new", layout: false
end
def signup
render partial: "registrations/new", layout: false
end
end
Routes
get "modals/signin", to: "modals#signin"
get "modals/signup", to: "modals#signup"