使用導軌和引導進行模式編輯

Question

我正在開發一個簡單的待辦事項列表。我想要爲每個列表項目刪除和編輯按鈕。另外我想編輯並創建模態窗口中打開。現在，這爲創建工作，我無法弄清楚如何使它與編輯（現在模態窗口顯示，但鋼鐵創建窗口）工作。

這裏是我的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部分與模態

<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">&times;</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> 

而且還任務controleer：

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表單打開但沒有填充選定的任務？

Answer 1

您在link_to edit_task_path(task)中正在使用remote: true。這樣，任務將異步加載，頁面不會被刷新。這就是爲什麼你的表單沒有被填滿。

此外，使用相同的鏈接加載任務並打開模式。我認爲你需要一個更好的方法。

Answer 2

在edit.html.erb

<%= render "tasks/form" %> 

添加Ajax調用在index.html.erb編輯頁面，獲取編輯頁面和模式顯示。