From 048374b217d0593cb183e610fa18abe482ac968e Mon Sep 17 00:00:00 2001 From: trevor-mill Date: Tue, 3 May 2022 13:40:27 +0000 Subject: [PATCH 1/5] Delete comments AJAXified --- app/controllers/comments_controller.rb | 5 +++++ app/views/comments/_comment.html.erb | 7 +++++-- app/views/comments/destroy.js.erb | 5 +++++ 3 files changed, 15 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 5b62df9..30cde99 100644 --- a/app/controllers/comments_controller.rb +++ b/app/controllers/comments_controller.rb @@ -59,6 +59,11 @@ 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.js.erb" + end + end end diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index 25bdd33..5433e61 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/destroy.js.erb b/app/views/comments/destroy.js.erb new file mode 100644 index 0000000..76e1ccf --- /dev/null +++ b/app/views/comments/destroy.js.erb @@ -0,0 +1,5 @@ +console.log("bye comment!") + +$("#<%= dom_id(@comment) %>").fadeOut(250, function() { + $(this).remove(); +}); From 68fd064e074f1497f247d7e128b3aa014e29a350 Mon Sep 17 00:00:00 2001 From: trevor-mill Date: Tue, 3 May 2022 14:25:15 +0000 Subject: [PATCH 2/5] Add comments AJAXified --- app/controllers/comments_controller.rb | 7 ++++++- app/views/comments/_form.html.erb | 4 ++-- app/views/comments/create.js.erb | 6 ++++++ 3 files changed, 14 insertions(+), 3 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 30cde99..be79e19 100644 --- a/app/controllers/comments_controller.rb +++ b/app/controllers/comments_controller.rb @@ -33,10 +33,15 @@ 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 } + format.js end + + + end end @@ -63,7 +68,7 @@ def destroy format.js do render template: "comments/destroy.js.erb" end - + end end diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb index f289224..2a10c2e 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..cabd579 --- /dev/null +++ b/app/views/comments/create.js.erb @@ -0,0 +1,6 @@ +var added_comment = $("<%= escape_javascript(render 'comments/comment', comment: @comment) %>"); + +$("#<%= dom_id(@comment.photo) %>_new_comment_form").before(added_comment); + +$("#<%= dom_id(@comment.photo) %>_new_comment_form #comment_body").val(""); + From fa2695e02e29fcb60bb5d98f714740fc58506dfd Mon Sep 17 00:00:00 2001 From: trevor-mill Date: Tue, 3 May 2022 14:29:14 +0000 Subject: [PATCH 3/5] Add comments animated --- app/views/comments/create.js.erb | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/views/comments/create.js.erb b/app/views/comments/create.js.erb index cabd579..068df5e 100644 --- a/app/views/comments/create.js.erb +++ b/app/views/comments/create.js.erb @@ -1,6 +1,9 @@ var added_comment = $("<%= escape_javascript(render 'comments/comment', comment: @comment) %>"); +added_comment.hide(); + $("#<%= dom_id(@comment.photo) %>_new_comment_form").before(added_comment); -$("#<%= dom_id(@comment.photo) %>_new_comment_form #comment_body").val(""); +added_comment.slideDown(300); +$("#<%= dom_id(@comment.photo) %>_new_comment_form #comment_body").val(""); From 0a5d02134a256c373368de46483f46ff26b7dc19 Mon Sep 17 00:00:00 2001 From: trevor-mill Date: Tue, 3 May 2022 15:16:43 +0000 Subject: [PATCH 4/5] stuck on editing --- app/controllers/comments_controller.rb | 1 + app/views/comments/_comment.html.erb | 4 +++- app/views/comments/edit.js.erb | 1 + 3 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 app/views/comments/edit.js.erb diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb index be79e19..3a20903 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 diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index 5433e61..5a4cb94 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), + remote: true, + class: "btn btn-link btn-sm text-muted" do %> <% end %> diff --git a/app/views/comments/edit.js.erb b/app/views/comments/edit.js.erb new file mode 100644 index 0000000..3c925fd --- /dev/null +++ b/app/views/comments/edit.js.erb @@ -0,0 +1 @@ +console.log("howdy neighbor"); From 4b7856f4fbe376eb32b5ed100f775181fb6c9cf3 Mon Sep 17 00:00:00 2001 From: trevor-mill Date: Tue, 3 May 2022 15:39:13 +0000 Subject: [PATCH 5/5] edit and delete comments AJAXified with help --- app/controllers/comments_controller.rb | 1 + app/views/comments/_form.html.erb | 2 +- app/views/comments/edit.js.erb | 4 ++++ app/views/comments/update.js.erb | 1 + 4 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 app/views/comments/update.js.erb diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb index 3a20903..9989ddf 100644 --- a/app/controllers/comments_controller.rb +++ b/app/controllers/comments_controller.rb @@ -52,6 +52,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 } diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb index 2a10c2e..5ae0624 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? %>
      diff --git a/app/views/comments/edit.js.erb b/app/views/comments/edit.js.erb index 3c925fd..a48e488 100644 --- a/app/views/comments/edit.js.erb +++ b/app/views/comments/edit.js.erb @@ -1 +1,5 @@ console.log("howdy neighbor"); + + +$("#<%= 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..650199e --- /dev/null +++ b/app/views/comments/update.js.erb @@ -0,0 +1 @@ +$("#<%= dom_id(@comment.photo) %>_<%= dom_id(@comment) %>_form").replaceWith("<%= j(render @comment) %>");