Edit in modal with rails and bootstrap

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

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.