在 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
这假设您希望模式出现在的任何页面都由 GroupsController
的 index
操作呈现。
试试这个:
在您的视图文件中
<div class="reveal-modal" id="newGroup" data-reveal>
<%= render template: 'groups/new' %>
<a class="close-reveal-modal">x</a>
</div>
我有一个网站,其中一个用户有一个 '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
这假设您希望模式出现在的任何页面都由 GroupsController
的 index
操作呈现。
试试这个:
在您的视图文件中
<div class="reveal-modal" id="newGroup" data-reveal>
<%= render template: 'groups/new' %>
<a class="close-reveal-modal">x</a>
</div>