在 rails 中打开模态表单而不导航到新页面

Opening modal form without navigating to new page in rails

我有一个网站,其中一个用户有一个 'Groups' 页面,为了创建一个新组,该用户当前必须单击 New Group 按钮,这会将他们定向到localhost/groups/new 页。我想删除该页面,并用模态弹出窗体替换它。

在群组视图中,我有部分 _form.html.erb 看起来像这样:

<%=form_for @group do |f|%>

<div class = "title">
    <%=f.label :title%>
    <%=f.text_field :title%>
</div>

<div class = "description">
    <%=f.label :description%>
    <%=f.text_field :description%>
</div>

<div class = "memberships">
    <%for user in @users%>
        <%= label_tag user.name%>
        <%= check_box('members', "[#{user.id}]") %>
    <% end %>
</div>

<div class="actions">
    <%= f.submit 'Submit', class: "button radius"%>
</div>

<%end%>

然后我的 new.html.erb 文件看起来像这样:

<h1>New Group</h1>

<%= render 'form' %>

我怎样才能使这个表单成为一个弹出模式而不是一个全新的页面?我想我可以像这样以显示模式呈现表单:

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation/foundation.js"></script>
    <script src="js/foundation/foundation.reveal.js"></script>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/foundation.min.css">
</head>
<body>
    <a href="#" class="button" data-reveal-id="newGroup">New Group</a>
    <div class="reveal-modal" id="newGroup" data-reveal>
        <%= render 'form' %>
        <a class="close-reveal-modal">x</a>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>

但这没有用,因为我得到一个错误:

First argument in form cannot contain nil or be empty

--> <%=form_for @group do |f|%>

<div class = "title">
    <%=f.label :title%>
    <%=f.text_field :title%>
</div>

我是否需要更改我的控制器中的某些内容才能使其正常工作?或者我可以以某种方式在模态中呈现我需要的页面吗?

编辑:这是我控制器中的index方法。我需要在这里更改什么?

def index
    if(params[:user_id].nil?)
        @groups = Group.where(owner_id: current_user.id)    
    else
        @groups = Group.where(owner_id: params[:user_id])
    end
  end

您关于更改控制器中某些内容的猜测可能是正确的。

您需要确保 @group 实例变量由呈现表单的控制器中的操作定义。这可能看起来像:

class GroupsController < ApplicationController
  # ...

  def index
    @group = Group.new
    # The rest of the implementation of this action.
  end

  # ...
end

这假设您希望模式出现在的任何页面都由 GroupsControllerindex 操作呈现。

试试这个:

在您的视图文件中

<div class="reveal-modal" id="newGroup" data-reveal>
  <%= render template: 'groups/new' %>
  <a class="close-reveal-modal">x</a>
</div>