1

I am attempting to place the sign in, sign up and edit forms (from devise) into Bootstrap modals using partials. I have successfully done this by creating partials for the forms (wrapped in the modal code) and rendering them in application.html.erb as follows:

<%= render 'articles/sign_up_modal' %>
<%= render 'articles/sign_in_modal' %>
<%= render 'articles/edit_profile_modal' %>

At the top of application.html.erb I have:

<script type="text/javascript"> $(function () { $("#sign_up").modal({show:false });</script>
<script type="text/javascript"> $(function () { $("#sign_in").modal({show:false });</script>
<script type="text/javascript"> $(function () { $("#edit_profile").modal({show:false });</script>

Where "sign_up", "sign_in" and "edit_profile" represent the id's of the modals from the partials. The modal is then displayed by clicking a button in the _header.html.erb partial:

<%= link_to '<button type="button" class="btn btn-primary">Edit Profile</button>'.html_safe, "#edit_profile", "data-toggle" => "modal" %>

Everything works great except the Edit Profile modal form does not prefill the form with the appropriate values unless I am also on the edit page when I click the button to display the modal. How can I get the Edit Profile modal form to prefill the users data no matter which page they are on in the background?

Does this make sense? Please tell me how I might clarify my question. Thanks!

vroomanj
  • 31
  • 5
  • If you are using more then one bootstrap modal it will require you to customize the modal code. I don't believe bootstrap supports that out of the box. – Joel Dec 16 '14 at 21:59

2 Answers2

1

The answer was provided to me by u/alec5216 on reddit.

He said:

Take a look at the devise source.

https://github.com/plataformatec/devise/blob/master/app/views/devise/registrations/edit.html.erb

You'll see the form is bound to the "resource" variable which is going to be an instance of a user model. I bet if you use current_user in the partial instead of resource you'll have the desired effect.

This worked. See HERE for the full conversation.

Community
  • 1
  • 1
vroomanj
  • 31
  • 5
0

In this case you will probably have to make an AJAX call to fetch the required data.

The data itself can either be JSON (for client-side rendering) or the complete html form rendered with the layout: false option. I usually go for the former because it is faster and easier to implement, unless your project is a single-page js application.

You can find more information on bootstrap ajax modals here on StackOverflow.

Community
  • 1
  • 1
m_x
  • 12,357
  • 7
  • 46
  • 60