From c262e37c3de1bba6f7cbe8f0d21f2c3b03c7e962 Mon Sep 17 00:00:00 2001 From: johnson-cole Date: Thu, 6 May 2021 23:47:36 +0000 Subject: [PATCH 1/2] Adding in some AJAX, bro --- app/controllers/comments_controller.rb | 4 ++++ app/views/comments/_comment.html.erb | 4 ++-- app/views/comments/_form.html.erb | 4 ++-- app/views/comments/create.js.erb | 8 ++++++++ app/views/comments/destroy.js.erb | 5 +++++ 5 files changed, 21 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..ea56bfb 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 {render template: "comments/create.js.erb"} else format.html { render :new, status: :unprocessable_entity } format.json { render json: @comment.errors, status: :unprocessable_entity } @@ -58,7 +59,10 @@ def destroy @comment.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 {render template: "comments/destroy.js.erb"} end end diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index 25bdd33..d9176f2 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,7 @@ <% 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..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..929de0f --- /dev/null +++ b/app/views/comments/create.js.erb @@ -0,0 +1,8 @@ +var added_comment = $("<%= escape_javascript(render 'comments/comment', comment: @comment) %>"); + + + + +$("#<%= dom_id(@comment.photo) %>_new_comment_form").fadeIn(100, function() { + $(this).before(added_comment); +}); \ No newline at end of file diff --git a/app/views/comments/destroy.js.erb b/app/views/comments/destroy.js.erb new file mode 100644 index 0000000..c2ab5f2 --- /dev/null +++ b/app/views/comments/destroy.js.erb @@ -0,0 +1,5 @@ + +console.log("Howdy") +$("#<%= dom_id(@comment) %>").fadeOut(100, function() { + $(this).remove(); +}); \ No newline at end of file From b7000071ebd07bc4a068134bea446fcffc772545 Mon Sep 17 00:00:00 2001 From: johnson-cole Date: Fri, 7 May 2021 00:33:54 +0000 Subject: [PATCH 2/2] Added create, edit, update AJAX --- app/controllers/comments_controller.rb | 2 ++ app/views/comments/_comment.html.erb | 2 +- app/views/comments/_form.html.erb | 2 +- app/views/comments/create.js.erb | 11 +++++++---- app/views/comments/edit.js.erb | 2 ++ app/views/comments/update.js.erb | 2 ++ 6 files changed, 15 insertions(+), 6 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 ea56bfb..2f109b3 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 {render template: "comments/edit.js.erb"} end end @@ -47,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 {render template: "comments/update.js.erb"} else format.html { render :edit, status: :unprocessable_entity } format.json { render json: @comment.errors, status: :unprocessable_entity } diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index d9176f2..b4c5fb9 100644 --- a/app/views/comments/_comment.html.erb +++ b/app/views/comments/_comment.html.erb @@ -9,7 +9,7 @@
      <% 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 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/create.js.erb b/app/views/comments/create.js.erb index 929de0f..062205d 100644 --- a/app/views/comments/create.js.erb +++ b/app/views/comments/create.js.erb @@ -1,8 +1,11 @@ -var added_comment = $("<%= escape_javascript(render 'comments/comment', comment: @comment) %>"); +var added_comment = $("<%= j(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").fadeIn(100, function() { - $(this).before(added_comment); -}); \ No newline at end of file +added_comment.slideDown(); + +// Clear the comment text box +$("#<%= dom_id(@comment.photo) %>_new_comment_form #comment_body").val(""); \ 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 0000000..7fe92c7 --- /dev/null +++ b/app/views/comments/edit.js.erb @@ -0,0 +1,2 @@ + +$("#<%= dom_id(@comment) %>").replaceWith("<%= j(render "comments/form", comment: @comment) %>");g a \ No newline at end of file diff --git a/app/views/comments/update.js.erb b/app/views/comments/update.js.erb new file mode 100644 index 0000000..f1b93cf --- /dev/null +++ b/app/views/comments/update.js.erb @@ -0,0 +1,2 @@ + +$("#<%= dom_id(@comment.photo) %>_<%= dom_id(@comment) %>_form").replaceWith("<%= j(render @comment) %>"); \ No newline at end of file