Issues with Bootstrap 3 modals and Rails 4 - Form Not Rendering

Question

I'm trying to get a modal to open to _form.html.erb and submit data. I'm having a problem with even showing the modal. I have rail 4 installed with bootstrap 3. I have been using the following for the example code..

How to add bootstrap modal with link_to so the link content open in modal ?

Code I have in index.html.erb where I have the button for the modal to open:

<!-- Begin Modal Test -->
<%= link_to "Open modal", new_weight_path, :class => "btn btn-default", :remote => true, "data-toggle" => "modal", "data-target" => "my-modal" %>
<div class="modal hide fade" id="my-modal" title="My modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
        <h3 id="myModalLabel">Add New Measurement:</h3>
      </div>
      <div class="modal-body a-unique-class">
        New Measurements
      </div>
      <div class="modal-footer">
        <button aria-hidden="true" class="btn" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal Test -->

JS in new.js.erb:

$(".a-unique-class").html('<%= j render "posts/_form" ')

I know I need to rename my classes and ID's, but I am just trying to get this to popup first. Am I missing something for my JS file or modal?

In the rails console I see the following:

Started GET "/weights/new

Rendered weights/_form.html.erb (11.5ms)

Rendered weights/new.html.erb within layouts/application (15.1ms)

So to me, it looks like is at least making the call, just no popup.

I have tried this within index.html.erb, but all it does it make the screen dim and no popup.

    <%= link_to "Open modal", "#my-modal", :class => "btn", "data-toggle" => "modal" %>
<div class="modal hide fade" id="my-modal" title="My modal">
  <div class="modal-header">
    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    Modal Body
  </div>
  <div class="modal-footer">
    <button aria-hidden="true" class="btn" data-dismiss="modal">Close</button>
  </div>
</div>

Thanks!

** Update **

I have gotten the modal to display with the below code..

    <%= link_to "Add Measure Modal", new_weight_path, :class => "btn btn-default", :remote => true, "data-toggle" => "modal", "data-target" => "#myModal" %>
<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-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Add New:</h4>
        </div> <!-- End Modal Header -->
        <div class="modal-body addmeasurement">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save Changes</button>
        </div>
      </div> <!-- End Modal Content -->
    </div> <!-- End Modal Dialog -->
  </div>

JS File:

$(".addmeasurement").html('<%= j render "weights/_form" %>')

My problem now is, the _form is not rendering into the modal. I'm missing a step or something in my controller?

Guess this might also be helpful, my controller:

  def create
  @weight = Weight.new(weight_params)
  flash[:notice] = "Measurements Added Successfully"
  @weight.save
  redirect_to :action => 'index'
  end

************* Update **************** Alright, so per the suggestion below.. I can now get my modal to open and render sometimes, well at least render text. The Form keeps throwing errors at me. I am using the _modal_form.html.erb file for this now as well.

The form I have:

<%= form_for(@weight, :remote => true) do |f| %>
  <% if @weight.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@weight.errors.count, "error") %> prohibited this measurement from being saved:</h2>

      <ul>
      <% @weight.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

However, when I keep it like this, it throws a NIL error on the form. I can fix this by doing the following:

<%= form_for(Weight.new, :remote => true) do |f| %>

But when doing this, I can't actually insert any values. I guess, why doesn't my controller already pass @weight over? below is my create definition:

  def create
  @weight = Weight.new(weight_params)
  flash[:notice] = "Measurements Added Successfully"
  @weight.save
  redirect_to :action => 'index'
  end

************** Update for Edit Modal

So this is what I have for the Edit modal..

_modal_edit_form.html.erb:

<%= form_for(@weight) do |f| %>

weight_controller.rb:

  def edit
  @weight = Weight.find(params[:id])
  end

  def update
  @weight.update(weight_params)
  flash[:notice] = "Measurements Updated Successfully"
  redirect_to :action => 'index'
  end

I can edit it properly through a direct link /weight/130/edit for example. That pulls the form up and autofills with the properties, but won't through the Modal.

Per your comment, I thought this is what was needed? However, no luck.. Doesn't do anything. Sorry, I'm still relatively new to RoR and trying to get the understanding of the controller and how it calls methods. Thanks!

Answer 1

This what I use on my modal and works fine. the button part you can use the link_to if you want. I hope this give you a idea on how to show the form in the modal. Then you can add some js for clearing, validation and closing after submit.

-- link_to or button --

  <button class="btn btn-success" data-toggle="modal" data-target="#newInspectionModal">
    <i class="icon-plus icon-white"></i>
  </button>

-- Modal --

  <div class="modal fade" id="newInspectionModal" 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">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Nueva Inspección</h4>
        </div>
        <div class="modal-body">
            <%= render :partial => "modal_form" %>
        </div>
      </div>
    </div>
  </div>

And the partial
_modal_form.html.erb

 <%= bootstrap_form_for @inspection,remote:true, :url => project_inspections_path(@project) do |f| %>
   <%= f.text_field :name, label:"Name" %>
   <%= f.submit "Crear", :class => 'btn btn-success'%>
  <% end %> 

If your creating the form with out the new.html.erb you need to pass the @weight on your index.
Update:

def new
    @weight = Weight.new
  end

  def new
    @weight = Weight.new
  end

  def edit
    @weight = Weight.new
  end