在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

---

流程

基本上，您正在尝试执行类似this 的操作 - 从您的 Rails 服务器加载动态数据

问题是如果没有中介技术发送asynchronous requests，您无法从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 %>")