Question

我有这个应用程序，其中我有任务和子任务。每个任务都有一个添加子任务按钮，点击后放到app.html.erb文件中的jquery脚本。然后附加ap标签来保存我的新子任务。现在想要的是代替那个段落，我希望它显示一个小的子任务创建表单，只包含：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＆amp; 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 %>")

通过轨道中的jquery渲染表单

1 个答案: