From 820994cce9b895c4b937f5e1c5aab85c4e65d05c Mon Sep 17 00:00:00 2001 From: Katherine Jarboe <110368535+melo616@users.noreply.github.com> Date: Thu, 26 Oct 2023 21:28:59 +0000 Subject: [PATCH 1/3] ajaxified destroy comment --- app/controllers/comments_controller.rb | 4 ++++ app/views/comments/_comment.html.erb | 8 ++++++-- app/views/comments/destroy.js.erb | 4 ++++ 3 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 app/views/comments/destroy.js.erb diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb index 5b62df9e..ad5236a2 100644 --- a/app/controllers/comments_controller.rb +++ b/app/controllers/comments_controller.rb @@ -59,6 +59,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 template: "comments/destroy" + end end end diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index 7b8dc14d..58a63782 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 %> @@ -15,7 +15,11 @@ <% end %> - <%= link_to comment, data: { turbo_method: :delete }, class: "btn btn-link btn-sm text-muted" do %> + <%= link_to comment, + method: :delete, + class: "btn btn-link btn-sm text-muted", + remote: true do %> + <% end %> <% end %> diff --git a/app/views/comments/destroy.js.erb b/app/views/comments/destroy.js.erb new file mode 100644 index 00000000..83fdf788 --- /dev/null +++ b/app/views/comments/destroy.js.erb @@ -0,0 +1,4 @@ +console.log("bye comment!") + +$("#<%= dom_id(@comment) %>").fadeOut(1000, function() { $(this).remove(); +}); From eb40267e54893454ae91cf29eaabf87af24a10b6 Mon Sep 17 00:00:00 2001 From: Katherine Jarboe <110368535+melo616@users.noreply.github.com> Date: Fri, 27 Oct 2023 15:20:01 +0000 Subject: [PATCH 2/3] ajaxified create comment --- app/controllers/comments_controller.rb | 1 + app/views/comments/_form.html.erb | 4 ++-- app/views/comments/create.js.erb | 5 +++++ 3 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 app/views/comments/create.js.erb diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb index ad5236a2..d7cd7928 100644 --- a/app/controllers/comments_controller.rb +++ b/app/controllers/comments_controller.rb @@ -33,6 +33,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 else format.html { render :new, status: :unprocessable_entity } format.json { render json: @comment.errors, status: :unprocessable_entity } diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb index 4917fb32..7ce9cb6b 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? %>
    <% 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/create.js.erb b/app/views/comments/create.js.erb index fbc9432e..27c55c3e 100644 --- a/app/views/comments/create.js.erb +++ b/app/views/comments/create.js.erb @@ -1,5 +1,11 @@ var added_comment = $("<%= escape_javascript(render 'comments/comment', comment: @comment) %>"); + +added_comment.hide(); + $("#<%= 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/edit.html.erb b/app/views/comments/edit.html.erb deleted file mode 100644 index 607e32ef..00000000 --- a/app/views/comments/edit.html.erb +++ /dev/null @@ -1,7 +0,0 @@ -
    -
    -

    editing comment

    - - <%= render 'form', comment: @comment %> -
    -
    \ No newline at end of file diff --git a/app/views/comments/edit.js.erb b/app/views/comments/edit.js.erb new file mode 100644 index 00000000..cd06f264 --- /dev/null +++ b/app/views/comments/edit.js.erb @@ -0,0 +1 @@ +$("#<%= dom_id(@comment) %>").replaceWith("<%= escape_javascript(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 00000000..9d051ffc --- /dev/null +++ b/app/views/comments/update.js.erb @@ -0,0 +1,3 @@ +var updated_comment = $("<%= escape_javascript(render 'comments/comment', comment: @comment) %>"); + +$("#<%= dom_id(@comment.photo) %>_new_comment_form").replaceWith(updated_comment);