Rails 我想再同一个页面通过 Bootstrap 3 的模态 Form 显示新增和编辑信息,结果报错

davidminaki · 2014年09月22日 · 最后由 hxplove01 回复于 2014年09月23日 · 7195 次阅读

C 端代码

class DepartsController < ApplicationController
  def new
    @depart = Depart.new
  end

  def create
    @depart = Depart.new(depart_params)
    if @depart.save
      redirect_to departs_path
    else
      render 'new'
    end
  end

  def index
    @departs = initialize_grid(Depart,:per_page => 5)
    new
  end

  def edit
    @depart = Depart.find(params[:id])
  end

  def update
    depart = Depart.find(params[:id])
    if Depart.update_attributes(depart_params)
      # Handle a successful update.
    else
      render 'edit'
    end
  end

  def destroy
    @departs = Depart.find(params[:id])
    @departs.destroy

    redirect_to departs_path
  end


  private

  def depart_params
    params.require(:depart).permit(:name, :note)
  end

end

V 端代码

<div class="col-md-1 col-md-offset-3">
  <%= link_to "新增", "#", class: "btn btn-sm btn-primary","data-toggle" => "modal", "data-target" => "#myModal" %>
</div>



<%# show_filters: :when_filtered %>
<%= grid(@departs,upper_pagination_panel: true,show_filters: :when_filtered) do |g|

  g.column name:  '序号',attribute: 'id',filter_type: :range do |depart|
    depart.id
  end

  g.column name:  '名称'   do |depart|
    depart.name
  end

  g.column name:  '备注'   do |depart|
    depart.note
  end


  g.column name:  '创建时间' , attribute: 'created_at' do |depart|
    depart.created_at.to_s(:short)
  end

  g.column   do |depart|
    link_to('编辑', depart, method: :delete, data: {"#",  "data-toggle" => "modal", "data-target" => "#myModal" })
  end
  g.column   do |depart|
    link_to('删除', depart, method: :delete, data: { confirm: '确认删除?' })
  end
end -%>




<!-- Modal -->
<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-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">新增</h4>
      </div>
      <div class="modal-body">

        <%= form_for(@depart) do |f| %>
            <%= f.label :name %>
            <%= f.text_field :name %>
            <br>
            <%= f.label :note %>
            <%= f.text_field :note %>
      </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <%= f.submit "保存", class: "btn btn-default" %>
          </div>
        <% end %>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Router

resources :departs

新增没有问题,是在模态表单下,但是单击编辑时就报错了 错误信息

Routing Error No route matches [POST] "/departs/7"

Rails.root: /Users/david/work/dvoa

Application Trace | Framework Trace | Full Trace

不知道你的代码是怎么出错了,不过我有更简单的实现方法,用 rails 的 ujs

app/views/departs/_new_modal.html.erb

<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-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">新增</h4>
      </div>

        <%= form_for(@depart) do |f| %>
          <div class="modal-body">
            <%= f.label :name %>
            <%= f.text_field :name %>
            <br>
            <%= f.label :note %>
            <%= f.text_field :note %>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <%= f.submit "保存", class: "btn btn-default" %>
          </div>
        <% end %>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

app/views/departs/new.js.erb

$(".modal").modal("hide");
$("<%= j render 'new_modal' %>")
.on("hidden.bs.modal", function() { $(this).remove() })
.appendTo(document.body)
.modal("show");

app/views/departs/index.html.erb


<%= link_to "新增", new_depart_path, class: "btn btn-sm btn-primary", data: { remote: true } %>

controller 不用动,edit 照上面改改就行了

<div class="modal-body">

        <%= form_for(@depart) do |f| %>
            <%= f.label :name %>
            <%= f.text_field :name %>
            <br>
            <%= f.label :note %>
            <%= f.text_field :note %>
      </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <%= f.submit "保存", class: "btn btn-default" %>
          </div>
        <% end %>

你把 form 标签切断了,导致表单提交的时候 method 没传过去,所以 routing error,可以看 log 确认。

@lolychee g.column do |depart| link_to("编辑", depart, method: :edit, data: { remote: true }) end

依葫芦画瓢,发现单机编辑后没有反应啊

link_to('编辑', depart, method: :delete 请查看这个地方

编辑是 GET 方式,link_to 有问题。另外,做 modal 可以直接用 remote,将 new 或者 editview 的 form 直接 load 进来,剩下的只是 UI 问题了

需要 登录 后方可回复, 如果你还没有账号请 注册新账号