From 054b258a67c19b2363f45471d48269d1c0e372d0 Mon Sep 17 00:00:00 2001 From: WillSchwieder Date: Mon, 2 May 2022 15:37:02 +0000 Subject: [PATCH 1/2] ajaxify-like --- app/controllers/comments_controller.rb | 6 ++++++ app/views/comments/_comment.html.erb | 7 +++++-- app/views/comments/_form.html.erb | 4 ++-- app/views/comments/create.js.erb | 4 ++++ app/views/comments/destroy.js.erb | 3 +++ 5 files changed, 20 insertions(+), 4 deletions(-) create mode 100644 app/views/comments/create.js.erb create mode 100644 app/views/comments/destroy.js.erb diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb index 5b62df9..f8b09e5 100644 --- a/app/controllers/comments_controller.rb +++ b/app/controllers/comments_controller.rb @@ -33,6 +33,8 @@ def create if @comment.save format.html { redirect_back fallback_location: root_path, notice: "Comment was successfully created." } format.json { render :show, status: :created, location: @comment } + + format.js { render "comments/create.js.erb"} else format.html { render :new, status: :unprocessable_entity } format.json { render json: @comment.errors, status: :unprocessable_entity } @@ -59,6 +61,10 @@ def destroy respond_to do |format| format.html { redirect_back fallback_location: root_url, notice: "Comment was successfully destroyed." } format.json { head :no_content } + + format.js do + render("comments/destroy.js.erb") + end end end diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index 25bdd33..56140bd 100644 --- a/app/views/comments/_comment.html.erb +++ b/app/views/comments/_comment.html.erb @@ -1,4 +1,4 @@ -
  • +
  • <%= image_tag comment.author.avatar_image, class: "rounded-circle mr-2", width: 36 %>
    @@ -13,7 +13,10 @@ <% end %> - <%= link_to comment, method: :delete, class: "btn btn-link btn-sm text-muted" do %> + <%= link_to comment, + method: :delete, + remote: true, + class: "btn btn-link btn-sm text-muted" do %> <% end %> <% end %> diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb index f289224..7f90a1a 100644 --- a/app/views/comments/_form.html.erb +++ b/app/views/comments/_form.html.erb @@ -1,5 +1,5 @@ -
  • - <%= form_with(model: comment) do |form| %> +
  • + <%= form_with(model: comment, local: false) do |form| %> <% if comment.errors.any? %>
      diff --git a/app/views/comments/create.js.erb b/app/views/comments/create.js.erb new file mode 100644 index 0000000..64ca96b --- /dev/null +++ b/app/views/comments/create.js.erb @@ -0,0 +1,4 @@ +$("#<%= dom_id(@comment.photo) %>_comment_form").before("<%= escape_javascript(render 'comments/comment', comment: @comment) %>") + + +$("#<%= dom_id(@comment.photo) %>_comment_form #comment_body").val("") diff --git a/app/views/comments/destroy.js.erb b/app/views/comments/destroy.js.erb new file mode 100644 index 0000000..4eada8d --- /dev/null +++ b/app/views/comments/destroy.js.erb @@ -0,0 +1,3 @@ +console.log("howdy from comments#destroy"); + +$("#comment_<%= @comment.id %>").remove(); From e8e9b7e54f27e737d6eb809fc19aedf2a845c8fd Mon Sep 17 00:00:00 2001 From: WillSchwieder Date: Tue, 3 May 2022 13:49:24 +0000 Subject: [PATCH 2/2] finally got the update to work, forgot to put js in the controller --- app/controllers/comments_controller.rb | 10 ++++------ app/views/comments/_comment.html.erb | 4 +++- app/views/comments/_form.html.erb | 3 +-- app/views/comments/create.js.erb | 9 +++++++-- app/views/comments/destroy.js.erb | 2 -- app/views/comments/edit.js.erb | 1 + app/views/comments/update.js.erb | 1 + 7 files changed, 17 insertions(+), 13 deletions(-) create mode 100644 app/views/comments/edit.js.erb create mode 100644 app/views/comments/update.js.erb diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb index f8b09e5..eac5e39 100644 --- a/app/controllers/comments_controller.rb +++ b/app/controllers/comments_controller.rb @@ -21,6 +21,7 @@ def new def edit respond_to do |format| format.html + format.js end end @@ -33,8 +34,7 @@ def create if @comment.save format.html { redirect_back fallback_location: root_path, notice: "Comment was successfully created." } format.json { render :show, status: :created, location: @comment } - - format.js { render "comments/create.js.erb"} + format.js else format.html { render :new, status: :unprocessable_entity } format.json { render json: @comment.errors, status: :unprocessable_entity } @@ -48,6 +48,7 @@ def update if @comment.update(comment_params) format.html { redirect_to root_url, notice: "Comment was successfully updated." } format.json { render :show, status: :ok, location: @comment } + format.js else format.html { render :edit, status: :unprocessable_entity } format.json { render json: @comment.errors, status: :unprocessable_entity } @@ -61,10 +62,7 @@ def destroy respond_to do |format| format.html { redirect_back fallback_location: root_url, notice: "Comment was successfully destroyed." } format.json { head :no_content } - - format.js do - render("comments/destroy.js.erb") - end + format.js end end diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index 56140bd..466c4e7 100644 --- a/app/views/comments/_comment.html.erb +++ b/app/views/comments/_comment.html.erb @@ -9,7 +9,9 @@
      <% if current_user == comment.author %> - <%= link_to edit_comment_path(comment), class: "btn btn-link btn-sm text-muted" do %> + <%= link_to edit_comment_path(comment), + class: "btn btn-link btn-sm text-muted", + remote: true do %> <% end %> diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb index 7f90a1a..5f27107 100644 --- a/app/views/comments/_form.html.erb +++ b/app/views/comments/_form.html.erb @@ -1,4 +1,4 @@ -
    • +
    • <%= form_with(model: comment, local: false) do |form| %> <% if comment.errors.any? %>
      @@ -13,7 +13,6 @@
    <% end %> - <%= form.hidden_field :photo_id %>
    diff --git a/app/views/comments/create.js.erb b/app/views/comments/create.js.erb index 64ca96b..120b538 100644 --- a/app/views/comments/create.js.erb +++ b/app/views/comments/create.js.erb @@ -1,4 +1,9 @@ -$("#<%= dom_id(@comment.photo) %>_comment_form").before("<%= escape_javascript(render 'comments/comment', comment: @comment) %>") +var added_comment = $("<%= j(render @comment) %>"); +added_comment.hide(); -$("#<%= dom_id(@comment.photo) %>_comment_form #comment_body").val("") +$("#<%= dom_id(@comment.photo) %>_new_comment_form").before(added_comment); + +added_comment.slideDown(); + +$("#<%= dom_id(@comment.photo) %>_new_comment_form #comment_body").val(""); diff --git a/app/views/comments/destroy.js.erb b/app/views/comments/destroy.js.erb index 4eada8d..a4932da 100644 --- a/app/views/comments/destroy.js.erb +++ b/app/views/comments/destroy.js.erb @@ -1,3 +1 @@ -console.log("howdy from comments#destroy"); - $("#comment_<%= @comment.id %>").remove(); diff --git a/app/views/comments/edit.js.erb b/app/views/comments/edit.js.erb new file mode 100644 index 0000000..fa5edd4 --- /dev/null +++ b/app/views/comments/edit.js.erb @@ -0,0 +1 @@ +$("#<%= dom_id(@comment) %>").replaceWith("<%= j(render "comments/form", comment: @comment) %>"); diff --git a/app/views/comments/update.js.erb b/app/views/comments/update.js.erb new file mode 100644 index 0000000..06a1388 --- /dev/null +++ b/app/views/comments/update.js.erb @@ -0,0 +1 @@ +$("#<%= dom_id(@comment.photo) %>_<%= dom_id(@comment) %>_form").replaceWith("<%= j(render @comment) %>");