applying ajax to project

app/assets/javascripts/projects.js

@@ -0,0 +1,3 @@
+$(document).on('ajax:success', function(e, data) {
+  console.log('Ajax Response data:', data);
+});

app/controllers/projects_controller.rb

@@ -5,6 +5,7 @@ class ProjectsController < ApplicationController
   # GET /projects.json
   def index
     @projects = Project.all
+    @project = Project.new
   end
 
   # GET /projects/1
@@ -48,6 +49,7 @@ def create
       if @project.save
         format.html { redirect_to projects_url, notice: 'Project was successfully created.' }
         format.json { render action: 'show', status: :created, location: @project }
+        format.js { render layout: false }
       else
         format.html { render action: 'new' }
         format.json { render json: @project.errors, status: :unprocessable_entity }
@@ -76,6 +78,7 @@ def destroy
     respond_to do |format|
       format.html { redirect_to projects_url }
       format.json { head :no_content }
+      format.js { render layout: false }
     end
   end
 

app/views/projects/_form.html.haml

@@ -1,4 +1,4 @@
-= form_for @project do |f|
+= form_for @project, remote: true do |f|
   - if @project.errors.any?
     #error_explanation
       %h2= "#{pluralize(@project.errors.count, "error")} prohibited this project from being saved:"

app/views/projects/_show.html.haml

@@ -0,0 +1,9 @@
+%tr{"data-project-id" => "#{project.id}"}
+  %td
+    = link_to project.name, project_url(project.id)
+    = "(#{project.phase.name})"
+  %td.text-center= "✓" unless current_user.subscriptions.where(project_id: project.id).blank?
+  %td= project.updated_at.strftime("%m/%d/%y at %I:%M%P")
+  %td= link_to 'Edit', edit_project_path(project.id)
+  %td= link_to 'Destroy', project_path(project.id), method: :delete, data: { confirm: 'Are you sure?' }, remote: true
+

app/views/projects/create.js.erb

@@ -0,0 +1,6 @@
+// console.log("hello world from 'create.js.erb'")
+
+(function () {
+  var projectHtml = "<%= j render('show', :project => @project) %>";
+  $('.projects').prepend(projectHtml);
+})();

app/views/projects/destroy.js.erb

@@ -0,0 +1,3 @@
+(function () {
+  $('tr[data-project-id="<%= @project.id %>"').remove();
+})();

app/views/projects/index.html.haml

@@ -2,6 +2,8 @@
   Active Projects
   %small= link_to 'New Project', new_project_path
 
+  =render 'form'
+
 .row
   .large-9.large-centered.columns
     %table
@@ -12,13 +14,6 @@
           %th Last updated
           %th
           %th
-      %tbody
+      %tbody.projects
         - @projects.each do |project|
-          %tr
-            %td
-              = link_to project.name, project_url(project.id)
-              = "(#{project.phase.name})"
-            %td.text-center= "✓" unless current_user.subscriptions.where(project_id: project.id).blank?
-            %td= project.updated_at.strftime("%m/%d/%y at %I:%M%P")
-            %td= link_to 'Edit', edit_project_path(project.id)
-            %td= link_to 'Destroy', project_path(project.id), method: :delete, data: { confirm: 'Are you sure?' }
+          =render 'show', project: project