在 Bootstrap 模式中渲染 Rails 视图答案

【问题标题】：Render a Rails view in a Bootstrap modal在 Bootstrap 模式中渲染 Rails 视图
【发布时间】：2015-11-17 21:54:24
【问题描述】：

我撞到了一堵砖墙。我已经解决这个问题很长时间了，我什至不确定我是如何到达我现在的位置的。我只能说，我尝试了以下所有方法都没有成功：

如何在“索引”视图上呈现 Bootstrap 模式中的“新建”、“编辑”和“删除”视图，而不是链接到每个单独的页面？

这是我现在的代码。现在，让我们忽略“编辑”和“删除”，只关注“新”。当我单击“新建”按钮时，会出现一个带有字符串“" 的模式（而不是该 ruby 语句应该呈现的形式）。我做错了什么？：

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" %>');
});

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap

【解决方案1】：

以 new 为例，你想渲染一个 javascript 文件。为此，您需要创建 items/new.js.erb。

另外，从您的链接中删除 ", data: { toggle: "modal", target: "#newModal" }"，我们将在 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

您不能直接在视图上使用“渲染”，您应该渲染部分而不是视图（这就是我要求您将表单放入部分的原因）。

【讨论】：

当我按照您的步骤操作时，我得到了未定义的“渲染”方法。你能想到为什么会这样吗？
好的，这是正确的答案。谢谢你。起初它对我不起作用的原因是因为我将 new.js.erb 文件放在 javascripts 文件夹而不是 views/items 文件夹中。也许您可以为可能阅读此内容的其他人澄清以上内容。太感谢了！！！你成就了我的一天

【解决方案2】：

我把它放在一起，它在加载后 3 秒在我的文档中添加了一个大“3”：

<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>

这应该能让你继续前进。

【讨论】：