Ajaxify Pull Request for Scaffolds

app/controllers/movies_controller.rb

@@ -39,6 +39,7 @@ def update
     respond_to do |format|
       if @movie.update(movie_params)
         format.html { redirect_to @movie, notice: "Movie was successfully updated." }
+        format.js
         format.json { render :show, status: :ok, location: @movie }
       else
         format.html { render :edit, status: :unprocessable_entity }

app/javascript/packs/application.js

@@ -3,7 +3,9 @@
 // a relevant structure within app/javascript and only use these pack files to reference
 // that code so it'll be compiled.
 
-import Rails from "@rails/ujs"
+// import Rails from "@rails/ujs"
+import Rails, { $ } from "@rails/ujs"; global.Rails = Rails;
+
 import * as ActiveStorage from "@rails/activestorage"
 import "channels"
 

app/models/actor.rb

@@ -1,2 +1,3 @@
 class Actor < ApplicationRecord
+  has_many :characters, dependent: :destroy
 end

app/models/director.rb

@@ -1,2 +1,3 @@
 class Director < ApplicationRecord
+  has_many :movies, dependent: :destroy
 end

app/models/movie.rb

@@ -1,3 +1,4 @@
 class Movie < ApplicationRecord
   belongs_to :director
+  has_many :characters, dependent: :destroy
 end

app/views/layouts/application.html.erb

@@ -7,6 +7,7 @@
     <%= csp_meta_tag %>
 
     <%= stylesheet_link_tag 'application', media: 'all' %>
+    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
     <%= javascript_pack_tag 'application' %>
   </head>
 

app/views/movies/_form.html.erb

@@ -1,4 +1,4 @@
-<%= form_with(model: movie) do |form| %>
+<%= form_with(model: movie, html: {id: "movie_form"}) do |form| %>
   <% if movie.errors.any? %>
     <div id="error_explanation">
       <h2><%= pluralize(movie.errors.count, "error") %> prohibited this movie from being saved:</h2>
@@ -42,6 +42,7 @@
   </div>
 
   <div class="actions">
+    <button id="resetButton" type="reset">Reset Form</button>
     <%= form.submit %>
   </div>
 <% end %>

app/views/movies/_movie.html.erb

@@ -0,0 +1,47 @@
+<tr id="movie_<%= movie.id %>">
+        <td class="movie-title">
+          <span class="movie-title-text"><%= movie.title %></span>
+          <div class="movie-form" style="display:none;">
+            <%= form_with(model: movie, local: false) do |form| %>
+              <%= form.text_field :title, id: "movie_title_#{movie.id}", onblur: 'Rails.fire(this.form, "submit")' %>
+              <%= form.submit style: "display:none;" %>
+            <% end %>
+          </div>  
+        </td>
+        <td class="movie-description">
+          <span class="movie-description-text"><%= movie.description %></span>
+          <div class="movie-form" style="display:none;">
+            <%= form_with(model: movie, local: false) do |form| %>
+              <%= form.text_area :description, id: "movie_description_#{movie.id}", onblur: 'Rails.fire(this.form, "submit")' %>
+              <%= form.submit style: "display:none;" %>
+            <% end %>
+          </div> 
+        </td>       
+        <td class="movie-duration">
+          <span class="movie-duration-text"><%= movie.duration %></span>
+          <div class="movie-form" style="display:none;">
+            <%= form_with(model: movie, local: false) do |form| %>
+              <%= form.number_field :duration, id: "movie_duration_#{movie.id}", onblur: 'Rails.fire(this.form, "submit")' %>
+              <%= form.submit style: "display:none;" %>
+            <% end %>
+          </div> 
+        </td>
+        <td class="movie-year">
+          <span class="movie-year-text"><%= movie.year %></span>
+          <div class="movie-form" style="display:none;">
+            <%= form_with(model: movie, local: false) do |form| %>
+              <%= form.number_field :year, id: "movie_year_#{movie.id}", onblur: 'Rails.fire(this.form, "submit")' %>
+              <%= form.submit style: "display:none;" %>
+            <% end %>
+          </div> 
+        </td>
+        <td>
+          <%= form_with(model: movie, local: false) do |form| %>
+            <%= form.select :director_id, options_for_select(Director.all.map {|director| [director.name, director.id]}, selected: movie.director_id), {id: "movie_director_#{movie.id}"}, {onchange: 'Rails.fire(this.form, "submit")'} %>
+            <%= form.submit style: "display:none;" %>
+          <% end %>
+        </td>
+        <td><%= link_to 'Show', movie %></td>
+        <td><%= link_to 'Edit', edit_movie_path(movie) %></td>
+        <td><%= link_to 'Destroy', movie, method: :delete, data: { confirm: 'Are you sure?' } %></td>
+      </tr>

app/views/movies/index.html.erb

@@ -16,12 +16,49 @@
 
   <tbody>
     <% @movies.each do |movie| %>
-      <tr>
-        <td><%= movie.title %></td>
-        <td><%= movie.description %></td>
-        <td><%= movie.duration %></td>
-        <td><%= movie.year %></td>
-        <td><%= movie.director_id %></td>
+      <tr id="movie_<%= movie.id %>">
+        <td class="movie-title">
+          <span class="movie-title-text"><%= movie.title %></span>
+          <div class="movie-form" style="display:none;">
+            <%= form_with(model: movie, local: false) do |form| %>
+              <%= form.text_field :title, id: "movie_title_#{movie.id}", onblur: 'Rails.fire(this.form, "submit")' %>
+              <%= form.submit style: "display:none;" %>
+            <% end %>
+          </div>  
+        </td>
+        <td class="movie-description">
+          <span class="movie-description-text"><%= movie.description %></span>
+          <div class="movie-form" style="display:none;">
+            <%= form_with(model: movie, local: false) do |form| %>
+              <%= form.text_area :description, id: "movie_description_#{movie.id}", onblur: 'Rails.fire(this.form, "submit")' %>
+              <%= form.submit style: "display:none;" %>
+            <% end %>
+          </div> 
+        </td>       
+        <td class="movie-duration">
+          <span class="movie-duration-text"><%= movie.duration %></span>
+          <div class="movie-form" style="display:none;">
+            <%= form_with(model: movie, local: false) do |form| %>
+              <%= form.number_field :duration, id: "movie_duration_#{movie.id}", onblur: 'Rails.fire(this.form, "submit")' %>
+              <%= form.submit style: "display:none;" %>
+            <% end %>
+          </div> 
+        </td>
+        <td class="movie-year">
+          <span class="movie-year-text"><%= movie.year %></span>
+          <div class="movie-form" style="display:none;">
+            <%= form_with(model: movie, local: false) do |form| %>
+              <%= form.number_field :year, id: "movie_year_#{movie.id}", onblur: 'Rails.fire(this.form, "submit")' %>
+              <%= form.submit style: "display:none;" %>
+            <% end %>
+          </div> 
+        </td>
+        <td>
+          <%= form_with(model: movie, local: false) do |form| %>
+            <%= form.select :director_id, options_for_select(Director.all.map {|director| [director.name, director.id]}, selected: movie.director_id), {id: "movie_director_#{movie.id}"}, {onchange: 'Rails.fire(this.form, "submit")'} %>
+            <%= form.submit style: "display:none;" %>
+          <% end %>
+        </td>
         <td><%= link_to 'Show', movie %></td>
         <td><%= link_to 'Edit', edit_movie_path(movie) %></td>
         <td><%= link_to 'Destroy', movie, method: :delete, data: { confirm: 'Are you sure?' } %></td>
@@ -33,3 +70,24 @@
 <br>
 
 <%= link_to 'New Movie', new_movie_path %>
+
+<script>
+  $(document).ready(function(){
+     $(".movie-title").on('click', function(){
+      $(this).children("span.movie-title-text").css("display", "none");
+      $(this).children("div.movie-form").css("display", "block");
+    });   
+    $(".movie-description").on('click', function(){
+      $(this).children("span.movie-description-text").css("display", "none");
+      $(this).children("div.movie-form").css("display", "block");
+    });
+    $(".movie-duration").on('click', function(){
+      $(this).children("span.movie-duration-text").css("display", "none");
+      $(this).children("div.movie-form").css("display", "block");
+    });
+    $(".movie-year").on('click', function(){
+      $(this).children("span.movie-year-text").css("display", "none");
+      $(this).children("div.movie-form").css("display", "block");
+    });
+  });
+</script>

app/views/movies/update.js.erb

@@ -0,0 +1,20 @@
+$("#movie_<%= @movie.id %>").replaceWith("<%= escape_javascript render('movie', movie: @movie) %>");
+
+$(document).ready(function(){
+     $(".movie-title").on('click', function(){
+      $(this).children("span.movie-title-text").css("display", "none");
+      $(this).children("div.movie-form").css("display", "block");
+    });   
+    $(".movie-description").on('click', function(){
+      $(this).children("span.movie-description-text").css("display", "none");
+      $(this).children("div.movie-form").css("display", "block");
+    });
+    $(".movie-duration").on('click', function(){
+      $(this).children("span.movie-duration-text").css("display", "none");
+      $(this).children("div.movie-form").css("display", "block");
+    });
+    $(".movie-year").on('click', function(){
+      $(this).children("span.movie-year-text").css("display", "none");
+      $(this).children("div.movie-form").css("display", "block");
+    });
+  });