在rails中通過jquery呈現表單

Question

我有這個應用程序，其中在我有任務和子任務。每個任務都有一個添加子任務按鈕，點擊進入jquery腳本放置在application.html.erb file.which然後附加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和使用它的追加函數。

這裏是新更新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服務器

問題是你不能動態地從Rails的，無需中介技術將數據加載到發送加載動態數據asynchronous requests

簡單來說，您的客戶端是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 %>")