Edit in modal with rails and bootstrap - ruby-on-rails

Question

I'm developing a simple todo list. I want to have delete and edit button for each list item. Also I want edit and create opens in modal window. Now thats work for create and I can't figure out how to make it work with edit(now modal window shows but it steel a create window).
Here is my 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>
This is _form partial with modal
<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">×</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>
And also task 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
Can anybody explain what I'm doing wrong? Wy form opens but doesnot fill with selected task?

Answer 1

In edit.html.erb
<%= render "tasks/form" %>
add ajax call for edit page in index.html.erb, fetch edit page and display it in modal.

Answer 2

You are using remote: true in your link_to edit_task_path(task). This way, task will be loaded asynchronously and the page will not be refreshed. Thats why your form doesn't get filled.
Also, using the same link to load the task and open the modal. I think you'll need a better approach.