Question

我试图让模式打开_form.html.erb并提交数据。我甚至在显示模态时遇到问题。我已经安装了带有bootstrap 3的rails 4.我一直在使用以下示例代码..

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

我在index.html.erb中的代码，其中我有打开模式的按钮：

<!-- 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" ')

我知道我需要重命名我的课程和ID，但我只是想先把它弹出来。我错过了我的JS文件或模态的东西吗？

在rails控制台中，我看到以下内容：

开始GET＆＃34; / weights / new

渲染权重/ _form.html.erb（11.5ms）

在布局/应用程序（15.1ms）内渲染权重/ new.html.erb

所以对我而言，它看起来至少是在打电话，而不是弹出窗口。

我在index.html.erb中尝试了这个，但它只会使屏幕变暗并且没有弹出窗口。

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

谢谢！

**更新**

我已经使用以下代码显示模式..

    <%= 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文件：

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

我现在的问题是，_form没有渲染到模态中。我错过了控制器中的一个步骤或什么？

猜猜这可能也有帮助，我的控制器：

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

*************更新**************** 好吧，所以根据下面的建议..我现在可以让我的模态打开并有时渲染，至少渲染文本。表格不断向我抛出错误。我现在也在使用_modal_form.html.erb文件。

我的表格：

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

但是，当我保持这样时，它会在表单上抛出NIL错误。我可以通过执行以下操作来解决此问题：

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

但是在这样做时，我实际上无法插入任何值。我猜，为什么我的控制器已经超过了@weight？下面是我的创建定义：

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

**************编辑模式的更新

所以这就是我对编辑模式的看法..

_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

我可以通过直接链接/ weight / 130 /编辑来正确编辑它。这样可以提升形式并自动填充属性，但不会通过模态。

根据你的评论，我认为这是需要的？但是，没有运气..没有做任何事情。对不起，我还是比较新的RoR，并试图了解控制器以及它如何调用方法。谢谢！

Answer 1

这是我在模态上使用的，并且工作正常。按钮部分，如果需要，可以使用link_to。我希望这可以让你了解如何在模态中显示表单。然后，您可以在提交后添加一些js用于清除，验证和关闭。

- link_to或按钮 -

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

- 模态 -

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

和部分
_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 %>

如果你创建没有new.html.erb的表单，则需要在索引上传递@weight 更新：

def new
    @weight = Weight.new
  end

  def new
    @weight = Weight.new
  end

  def edit
    @weight = Weight.new
  end

Bootstrap 3模态和Rails 4的问题 - 表单不呈现

1 个答案: