Render a Rails view in a Bootstrap modal

Question

I have hit a brick wall. I've been hacking at this problem for so long now, I'm not even sure how I got to where I am. All I can say is, I've tried all of the below without success:

How do I render "new", "edit" and "delete" views within Bootstrap modals on the "index" view rather than linking to separate pages for each?

Here is my code as it stands now. For now, lets ignore "edit" and "delete" and just focus on "new". When I click the "New" button, a modal with the string "<%= j render "items/new" %>" appears (instead of the form that that ruby statement should render). What am I doing wrong?:

items_controller.rb:

class ItemsController < ApplicationController

  def index
    @items = Item.all
  end

  def new
    respond_to do |format|
      format.js {}
    end
  end

  def create
    @item = Item.new(item_params)
    if @item.save
      flash[:notice] = "'#{@item.name}' saved!"
      redirect_to items_path
    else
      flash[:notice] = "Something went wrong :("
      render "index"
    end
  end

  def edit
    @item = Item.find(params[:id])
    respond_to do |format|
      format.js {}
    end
  end

  def update
    @item = Item.find(item_params[:id])
    if @item.update_attributes(item_params)
      flash[:notice] = "Successfully updated #{@item.name}."
      redirect_to items_path
    else
      flash[:notice] = "Oops"
      # render "edit"
    end
  end

  private
    def item_params
      params.require(:item).permit(:name, :bid, :uuid)
    end

end

items/index.html.erb

<div class="row">
  <div class="col-xs-12">
    <%= link_to "New", new_item_path, remote: true, class: "btn btn-success pull-right new", data: { toggle: "modal", target: "#newModal" } %>
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <table class="table table-hover items">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>UUID</th>
          <th colspan="2">Links</th>
        </tr>
      </thead>
      <tbody>
        <% @items.each do |item| %>
          <tr>
            <td><%= item.id %></td>
            <td><%= item.name %>

              <!-- edit/remove icons -->
              <span class="edit-remove">
                <%= link_to edit_item_path(item.id), remote: true, data: { toggle: "modal", target: "#editModal" } do %>
                  <span class="glyphicon glyphicon-pencil text-muted"></span>
                <% end %>
                <a href="#">
                  <span class="glyphicon glyphicon-remove text-muted"></span>
                </a>
              </span>

            </td>
            <td><%= item.uuid %></td>
            <td><%= link_to "XXX", "http://xxx" %></td>
            <td><%= link_to "XXXX", "http://xxx", target: "_blank" %></td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>

<!-- newModal skeleton -->
<div class="modal fade" id="newModal">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

<!-- editModal skeleton -->
<div class="modal fade" id="editModal">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

<!-- deleteModal skeleton -->
<div class="modal fade" id="deleteModal">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

items/new.html.erb

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
  <h4 class="modal-title">New Item</h4>
</div>
<div class="modal-body">
  <%= form_for :item, url: { action: "create" } do |f| %>
    <div class="form-group">
      <%= f.label :name, "Name" %>
      <%= f.text_field :name, { class: "form-control" } %>
    </div>
    <div class="form-group">
      <%= f.label :bid, "BID" %>
      <%= f.text_field :bid, { class: "form-control" } %>
    </div>
    <div class="form-group">
      <%= f.label :uuid, "UUID" %>
      <%= f.text_field :uuid, { class: "form-control" } %>
    </div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <%= submit_tag "Save", class: "btn btn-primary" %>
  <% end %>
</div>

javascripts/items.js

$(document).on("page:change", function() {
  $("#newModal .modal-content").html('<%= j render "items/new" %>');
});

score 7 · Accepted Answer · answered Nov 17 '15 at 23:13

7

In the case of new for instance, you want to render a javascript file. For this, you'll need to create items/new.js.erb.

Also, remove ", data: { toggle: "modal", target: "#newModal" }" from your link, we will do that in the javascript.

  # new.js.erb
  $("#newModal .modal-content").html('<%= j render "items/form" %>');
  $("#newModal").modal(); // Or whatever the Bootstrap function is to render the modal


  # items/_form.html.slim
  # Here you'll put your form

You cannot use "render" on views directly, you should render partials and not views (this is why I asked you to put your form into a partial).

answered Nov 17 '15 at 23:13

I am getting undefined method 'render' when I follow your steps. Can you think of why that would happen? – wetjosh Nov 18 '15 at 01:02
2

Ok, this is the correct answer. Thank you. The reason it didn't work for me at first is because I was placing the new.js.erb file in the javascripts folder instead of the views/items folder. Maybe you could clarify that above for others that may read this. Thank you so much!!! You made my day – wetjosh Nov 18 '15 at 02:05

score 0 · Answer 2 · answered Nov 18 '15 at 01:46

I threw this together and it puts a big '3' in my document 3 seconds after loading it:

<script>
setTimeout(function() {
    $("#holder").html("<%= j render(:file => 'things/test.html.erb') %>");
}, 3000);
</script>
<div id="holder></div>

app/views/things/test.html.erb:

<h1><%= 1 + 2 %></h1>

That should get you going.

Render a Rails view in a Bootstrap modal

2 Answers2