If there's a better way to phrase the question, or a better way to do this, please let me know.

I want to update some models using the form_for using a modal. User clicks on an "edit" and a modal pop-up with the fields and can click submit or cancel. One way I can do it is create a modal for every single model, but that seems wrong and would really bulk up the html.erb file.

How can I do this? I'm guessing I use the remote feature somehow?

<div class="modal fade" id="edit-modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">             
          <%= simple_form_for(@rate) do |f| %>
            <%= f.label "Rate / session" %> 

            <%= f.input :rate_dollars, :label => false, collection: 0..100, :selected => @dol_amt, :include_blank => false %>
            <%= f.input :rate_cents, :label => false, collection: {".00" => 0, ".25" => 0.25, ".50" => 0.50, ".75" => 0.75}, :selected => @cent_amt,  :include_blank => false %>        

            <%= f.hidden_field :uid, :value => @user.id %>
            <%= f.submit "Update", class: "btn btn-primary" %>
          <% end %>         
        </div>
    </div>
</div>

If there's a better way to phrase the question, or a better way to do this, please let me know.

I want to update some models using the form_for using a modal. User clicks on an "edit" and a modal pop-up with the fields and can click submit or cancel. One way I can do it is create a modal for every single model, but that seems wrong and would really bulk up the html.erb file.

How can I do this? I'm guessing I use the remote feature somehow?

<div class="modal fade" id="edit-modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">             
          <%= simple_form_for(@rate) do |f| %>
            <%= f.label "Rate / session" %> 

            <%= f.input :rate_dollars, :label => false, collection: 0..100, :selected => @dol_amt, :include_blank => false %>
            <%= f.input :rate_cents, :label => false, collection: {".00" => 0, ".25" => 0.25, ".50" => 0.50, ".75" => 0.75}, :selected => @cent_amt,  :include_blank => false %>        

            <%= f.hidden_field :uid, :value => @user.id %>
            <%= f.submit "Update", class: "btn btn-primary" %>
          <% end %>         
        </div>
    </div>
</div>

• javascript
• ruby-on-rails
• modal-dialog
• form-for

Share Improve this question Follow edited Oct 6, 2016 at 17:47 DTavaszi asked Oct 6, 2016 at 17:31 DTavasziDTavaszi 19211 silver badge1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The way I got it acplished was setting up a modal skeleton in the index page, and then a bit of JS to load the form with the controller action responding to format.js with the form partial.

<div id="user-form-edit" class="modal fade">
  <div class="modal-dialog modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h3>Edit User</h3>
    </div>
    <div class="modal-body"></div>
  </div>
</div>

Then in a JS file:

$('#user-form-edit').on("show.bs.modal", function(e) {
    $(this).find('.modal-body').load(e.relatedTarget.dataset.url);
});

In the controller:

def edit
  @user = User.find(params[:id])
  respond_to do |format|
    format.js { render partial: "form", locals: {user: @user}}
  end
end

This way, you have a single modal that you can use for all the users.

-- EDIT how to open the modal ---

<%= link_to "#", class: "btn btn-warning edit",
    data: {
      toggle: "modal",
      url: edit_admin_user_path(user.id),
      target: "#user-form-edit"} do %>
  <i class="glyphicon glyphicon-edit glyphicon-white"></i>
  Edit
<% end %>

You are on the right track by thinking about using the remote feature (AJAX) for what you want to achieve.

First just create an empty div that will be populated eventually with an AJAX query:

<div id="edit-modal" class="modal fade" role="dialog"></div>

Next change your edit to hit an action in your controller using AJAX by adding remote: true to the link and associate it with your modal dialog using data-toggle and data-target.

  <%= link_to edit_modelinstance(@modelinstance), remote: true, 'data-toggle' => 'modal', 'data-target' => '#edit-modal' do %>

then create a partial that will contain the modal content to be added to the empty div created earlier .. e.g., _edit.html.erb

    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h3 id="myModalLabel">Modal Title</h3>
        </div>

        <div class="modal-body">
          <%= simple_form_for(@rate) do |f| %>
            <%= f.label "Rate / session" %> 

            <%= f.input :rate_dollars, :label => false, collection: 0..100, :selected => @dol_amt, :include_blank => false %>
            <%= f.input :rate_cents, :label => false, collection: {".00" => 0, ".25" => 0.25, ".50" => 0.50, ".75" => 0.75}, :selected => @cent_amt,  :include_blank => false %>        

            <%= f.hidden_field :uid, :value => @user.id %>
            <%= f.submit "Update", class: "btn btn-primary" %>
          <% end %>          

          <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
            <%= f.submit 'Submit', class: 'btn btn-primary' %>
          </div>
        </div>
      </div>
    </div>

Note the div structure (those parts identified by class of modal-xxxx) is important for the modal to display correctly.

Now finally you just need to render and populate the div as a response to the AJAX call so create an js.erb (e.g., edit.js.erb) file for your controllers action and add the following to it.

$("#edit-modal").html("<%= escape_javascript(render partial: 'form') %>");

Finally just ensure you are rendering js from your controller:

  format.js