From d9473ebc9fbc365ff48f8bbf3c970ff6708dd3db Mon Sep 17 00:00:00 2001 From: vaishnaray1 Date: Thu, 28 Apr 2022 15:01:28 +0000 Subject: [PATCH] added ajax to update, delete, edit, and create comments --- app/controllers/comments_controller.rb | 7 +++++++ app/controllers/likes_controller.rb | 1 + app/views/comments/_comment.html.erb | 8 +++++--- app/views/comments/_form.html.erb | 4 ++-- app/views/comments/create.js.erb | 10 ++++++++++ app/views/comments/destroy.js.erb | 3 +++ app/views/comments/edit.js.erb | 1 + app/views/comments/update.js.erb | 1 + app/views/likes/destroy.js.erb | 1 + app/views/photos/_photo.html.erb | 4 ++-- 10 files changed, 33 insertions(+), 7 deletions(-) create mode 100644 app/views/comments/create.js.erb create mode 100644 app/views/comments/destroy.js.erb create mode 100644 app/views/comments/edit.js.erb create mode 100644 app/views/comments/update.js.erb create mode 100644 app/views/likes/destroy.js.erb diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb index 5b62df9..fe57c8e 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,6 +34,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 else format.html { render :new, status: :unprocessable_entity } format.json { render json: @comment.errors, status: :unprocessable_entity } @@ -46,6 +49,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 } @@ -59,6 +63,9 @@ 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/controllers/likes_controller.rb b/app/controllers/likes_controller.rb index 49affd3..16a839b 100644 --- a/app/controllers/likes_controller.rb +++ b/app/controllers/likes_controller.rb @@ -53,6 +53,7 @@ def destroy respond_to do |format| format.html { redirect_back fallback_location: root_url, notice: "Like was successfully destroyed." } format.json { head :no_content } + format.js end end diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index 25bdd33..6226176 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 %>
    @@ -9,13 +9,15 @@
    <% 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 %> - <%= link_to comment, 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/_form.html.erb b/app/views/comments/_form.html.erb index f289224..5ae0624 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..d3f5c7f --- /dev/null +++ b/app/views/comments/create.js.erb @@ -0,0 +1,10 @@ + +var added_comment = $("<%= j(render @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/destroy.js.erb b/app/views/comments/destroy.js.erb new file mode 100644 index 0000000..c444b68 --- /dev/null +++ b/app/views/comments/destroy.js.erb @@ -0,0 +1,3 @@ +$("#<%= dom_id(@comment) %>").fadeOut(1000, function() { + $(this).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) %>"); diff --git a/app/views/likes/destroy.js.erb b/app/views/likes/destroy.js.erb new file mode 100644 index 0000000..4c4c946 --- /dev/null +++ b/app/views/likes/destroy.js.erb @@ -0,0 +1 @@ +console.log(<%=dom_id(@like)%>) diff --git a/app/views/photos/_photo.html.erb b/app/views/photos/_photo.html.erb index dd220b0..3599d6c 100644 --- a/app/views/photos/_photo.html.erb +++ b/app/views/photos/_photo.html.erb @@ -31,8 +31,8 @@ <% like = current_user.likes.find_by(photo: photo) %> <% if like %> - <%= link_to like, class: "btn btn-link", method: :delete do %> - + <%= link_to like, method: :delete, class: "btn btn-link", remote: true do %> + Un-like <% end %>