我正在开发一个简单的待办事项列表。我想为每个列表项目具有删除和编辑按钮。我也希望在模态窗口中进行编辑和创建打开。现在为创建工作,我无法弄清楚如何使其与编辑一起使用(现在模态窗口显示,但它使创建窗口固定)。
这是我的index.html:
<div class="container-fluid">
<div class="row">
<h1 class="text-left">Task List</h1>
<button type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#myModal">New task</button>
</div>
<div class="row button-margin ">
<% @tasks.each do |task| %>
<div class="panel <%= task_status(task) %>">
<div class="panel-heading">
<%= task.title %>
<%= link_to task_path(task), class:"btn btn-link pull-right", method: :delete, data: { confirm: 'Are you sure?' } do %>
<span class="glyphicon glyphicon-remove" style="color:gray"></span>
<% end %>
<!-- <button type="submit" class="btn btn-link pull-right"> -->
<%= link_to edit_task_path(task), class:"btn btn-link pull-right", remote:true, "data-toggle" => "modal", "data-dismiss=" => "modal", "data-target" => "#myModal" do %>
<span class="glyphicon glyphicon-pencil" style="color:gray"></span>
<!-- </button> -->
<% end %>
</div>
<div class="panel-body">
<h3><%= task.body %></h3>
</div>
</div>
<% end %>
</div>
<%= render "tasks/form" %>
</div>
这是_form partial at modal
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">New task</h4>
</div>
<div class="modal-body">
<%= form_for @task, :html => {class:"form-horizontal"} do |f|%>
<div class="form-group">
<label for="inputTitle" class="col-sm-2 control-label">Title</label>
<div class="col-sm-10">
<%= f.text_field :title, class:"form-control", id:"inputTitle", placeholder:"Title" %>
</div>
</div>
<div class="form-group">
<label for="inputBody" class="col-sm-2 control-label">Task</label>
<div class="col-sm-10">
<%= f.text_area :body, class:"form-control", id:"inputBody", placeholder:"Task text", rows:"3"%>
</div>
</div>
<div class="form-group">
<label for="dueDate" class="col-sm-2 control-label">Date</label>
<div class="col-sm-10">
<%= f.datetime_local_field :dueDate, class:"form-control", id:"dueDate"%>
</div>
</div>
<div class="modal-footer">
<%= f.submit class:"btn btn-primary"%>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<% end %>
</div>
</div>
</div>
</div>
以及任务控制器:
class TasksController < ApplicationController
def index
@tasks=Task.all
@task = Task.new
end
def new
@task=Task.new
end
def show
@task=Task.find(params[:id])
end
def edit
@task=Task.find(params[:id])
end
def create
@task=Task.new(task_params)
if @task.save
redirect_to tasks_path
else
render 'new'
end
end
def update
@task = Task.find(params[:id])
if @task.update(task_params)
redirect_to tasks_path
else
render 'edit'
end
end
def destroy
@task = Task.find(params[:id])
@task.destroy
redirect_to tasks_path
end
private
def task_params
params.require(:task).permit(:title, :body, :creationDate, :dueDate)
end
end
有人可以解释我做错了什么吗?WY表单打开,但没有填写所选任务?
在edit.html.erb
中<%= render "tasks/form" %>
在index.html.erb中添加ajax调用编辑页面,获取编辑页面并以模式显示。
您在link_to edit_task_path(task)
中使用remote: true
。这样,任务将异步加载,并且页面不会刷新。那就是为什么您的表格没有被填写。
另外,使用相同的链接加载任务并打开模式。我认为您需要更好的方法。