为什么我的评论被呈现为 JSON 对象而不是附加到 DOM

Question

I am creating a comment with Jquery and want to append it to the page without a page reload. I have a commentConfirm prototype function catching it before the post. I cannot use remote:true on this project so here is the code :

$(function createComment() {
  $("#new_comment").on("submit", function(e) {

    const values = {
      description: $('#comment_description').val(),
      rating: $('#comment_rating').val()
    };

    const newComment = new Comment(values);
    newComment.commentConfirm();

  });
});

function Comment(comment) {
  this.description = comment.description;
  this.rating = comment.rating;
}

Comment.prototype.commentConfirm = function(e) {
  let doIt = confirm(`You are about to comment: "${this.description}" and give a rating of: ${this.rating} stars`);
  if(!doIt)
    return;

  let params = {
    'comment[description]': this.description,
    'comment[rating]': this.rating
  };

  $.post(this.action, params).success(function(response) {

    $('div.comments_container').append('<div class="new_comment_' + `${response.id}` + '"> </div>')

      $('div.new_comment_'+ `${response.id}`).append('<h3 class="cheading">' + `${response.user.name}` + ' gives ' + `${response.rating}` + ' out of 5 stars! </h3>')
      $('div.new_comment_'+ `${response.id}`).append('<p class="cdescription">' + `${response.description}` + '</p>')
      $('div.new_comment_'+ `${response.id}`).append('<a class="ecomment" href="/recipes/' + `${response.recipe_id}` + '/comments/' + `${response.id}` + '/edit">Edit</a>' + " ")
      $('div.new_comment_'+ `${response.id}`).append('<a class="dcomment" rel="nofollow" data-method="delete" href="/comments/' + `${response.id}` + '">Delete</a>')

      $('form#new_comment')[0].reset();
    });
};

Not sure if this is causing an issue but here is my create function in the controller:

 def create
    if logged_in?
      comment = Comment.new(comment_params)
      comment.recipe = find_by_recipe_id
      comment.user = current_user
        if comment.description.empty? || comment.rating == nil
          redirect_to recipe_path(comment.recipe), alert: "Please fill out all fields"
        else
          comment.save
          render json: comment.to_json(only: [:rating, :description, :id, :recipe_id],
                                    include: [user: { only: [:name]}])

      end
    else
      redirect_to login_path, alert: "You must be logged in to comment"
    end
  end

Any help with his problem would be greatly appreciated!!

here is the repo if that helps answer some other questions: https://github.com/Bartekswistak/fun_guy_chef/tree/jquery

Answer 1

I can't confirm the rest of your code is working correctly, but you will need handle the submit event manually to prevent the page from reloading...

$("#new_comment").on("submit", function(e) {
   e.preventDefault();

   ....

Answer 2

The submit event reloads the page. To stop it from reloading the page, prevent its default action . So, your very first function would look like:

$(function createComment() {
  $("#new_comment").on("submit", function(e) {

    e.preventDefault();

    const values = {
      description: $('#comment_description').val(),
      rating: $('#comment_rating').val()
    };

    const newComment = new Comment(values);
    newComment.commentConfirm();

  });
});