通过rails中的jquery呈现表单

Question

我有这个应用程序，其中我有任务和子任务。每个任务都有一个添加子任务按钮，单击后会转到application.html.erb文件中的jquery脚本。然后，该脚本会附加一个p标记来保存我的新子任务。现在，我希望它显示一个小的子任务创建表单，而不是该段落，该表单仅由：name文本字段和一个保存按钮组成，它将执行我的子任务控制器的创建操作。

记住每个子任务都属于一个任务

这就是我现在创建子任务的方式

<% provide(:title,'ToDoProject') %>
<% flash.each do |key,value| %>
<div class="alert alert-<%=key %>"><%=value %></div>
<%end%>
<h1>Create a subtask</h1>
<div class="container-fluid">
<div class="row-fluid">
<div class="span7">
<%=form_for [@task,@subtask] do |s| %>
<%=s.label :name %>
<%=s.text_field :name,autofocus:'true' %>
<%=s.submit "Save",class:'btn btn-success'%>
<%end%>
</div>
</div>
</div>

我想要这个相同的表单，但当用户单击"添加我的任务的新子任务"时，它会动态显示，这样用户就可以为子任务命名，然后单击"保存"，它就会保存到我的数据库中。

但所有这些都是通过jquery和使用其append函数所必需的。

这是最新更新的show.html.erb，带有子任务窗体和使其可见的"添加卡片"按钮

<div class="subtaskform" id="subtask_form_<%=task.id %>" style="width:218px;margin:0 2px 0px 3px;">
<%= form_for([task, task.subtasks.build]) do |f| %>
<%= f.text_area :name,rows:'3',cols:'3'%>

<%= f.submit "save",class:'btn btn-success' %>
<a data-id='<%=task.id %>' href="#"><i class="fa fa-times fa-lg"></i></a>
<% end %>
</div>

<p class="addcard" id="addcard_<%=task.id%>"><a href="#" data-id='<%= task.id %>' id='add_card_<%= task.id %>'>Add a card...</a></p>

这是jquery代码

$('.addcard > a').click(function(e){
$('#subtask_form_' + $(this).data('id')).show(1000);
e.preventDefault();
});
$('.subtaskform a').click(function(e){
$('#subtask_form_' + $(this).data('id')).hide(1000);
e.preventDefault();
});

Answer 1

我认为您需要使用Ajax

---

过程

基本上，您正在尝试这样做——从Rails服务器加载动态数据

问题是，如果没有发送异步请求的中间技术，就无法从Rails动态加载数据

简单来说，您的客户端是HTML&JS，其中一个需要向Rails服务器发送请求，在视图中呈现响应

---

代码

#config/routes.rb
resources :tasks do
resources :subtasks #creates /tasks/1/subtasks/new etc
end
#app/views/tasks/index.html.erb
<% @tasks.each do |task| %>
<%= task.name %>
<%= button_to "New Subtask", new_tasks_subtasks_path(task.id), remote: :true %>
<% end %>
#app/controllers/subtasks_controller.rb
respond_to :html, :js
def new
@task = params[:task_id]
@subtask = SubTask.new
end
def create
@subtask = Subtask.new(subtask_params)
@subtask.save
end
private
def subtask_params
params.require(:subtask).permit(:name, :etc)
end
#app/views/subtasks/new.html.erb
<%= form_for [@task,@subtask] do |s| %>
<%=s.label :name %>
<%=s.text_field :name,autofocus:'true' %>
<%=s.submit "Save",class:'btn btn-success'%>
<% end %>
#app/views/subtasks/new.js.erb
$(".parent_div").append("<%=j render "new", layout: false %>")