モールでレールとブートストラップで編集

Question

私は単純なtodoリストを開発しています。私はそれぞれのリスト項目の削除と編集ボタンを持っています。また、私は編集し、モーダルウィンドウで開くを作成します。今はthatsが作成のために働き、私はそれが編集で動作するようにする方法を理解できません（今はモーダルウィンドウの表示ですが、スチールの作成ウィンドウ）。ここで

は私の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> 

これはモーダル

<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> 

と部分的_formであり、また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" %> 

編集ページをフェッチし、モーダルに表示、index.html.erbに編集ページ用のAJAX呼び出しを追加します。