Попытка добавить ajax в приложение rails для обновления комментариев, однако файл js не выполняется в браузере

Question

Я пытаюсь добавить ajax в мое приложение rails, чтобы при добавлении нового комментария к одному из моих объектов страница не обновлялась и не переходила наверх страницы, а обновлялась и оставалась в том же месте.

Чтобы проверить, что js, который я напишу, чтобы сделать это, работает, я консоль записал некоторый текст в отдельный файл views/comments/create.js.erb, чтобы убедиться, что JS был выполнен в моем браузере.

Когда я иду в свой браузер и проверяю, затем нажимаю вкладку Консоль, когда я создаю комментарий, я ожидаю увидеть текст, который я записал в консоль. Вместо этого я ничего не вижу.

Может кто-нибудь сказать мне, правильно ли я что-то связываю? Вот мой репо, если необходимо: https://github.com/Angela-Inniss/hair-do

Большое спасибо заранее

контроллер комментариев:

class CommentsController < ApplicationController
  def new
    @hairstyle = Hairstyle.find(params[:hairstyle_id])
    @comment = Comment.new
  end

  def create
    # we need to find the hairstyle route would be
    # hairstyle/hairstyle id/comments
    @hairstyle = Hairstyle.find(params[:hairstyle_id])
    @comment = Comment.new(comment_params)
    @comment.hairstyle = @hairstyle
    @comment.user = @user

     if @comment.save!
      redirect_to hairstyle_path(@hairstyle)
    else
      render 'hairstyles/show'
    end
  end

  def destroy
  end

  private

  def comment_params
    params.require(:comment).permit(:content)
  end
end

views / comments / create.js.erb file (этот текст я хотел бы видеть в своем браузере в разделе CONSOLE:

console.log('hello ajax')

ОБНОВЛЕНИЕ ФАЙЛА CREATE.JS.ERB, теперь, когда я знаю, что javascript работает (из файла console.log, который я сделал выше), я добавил нужный мне javascript в файл create.js.erb (см. Ниже), но он не выполняет действие, которое я хочу. Я бы хотел, чтобы комментарии пользователей были вставлены в конце существующих комментариев, чтобы страница не обновлялась и не переходила в верхнюю часть экрана, а затем я хочу очистить поле для комментариев. Можете ли вы увидеть что-нибудь, что выглядит неуместным в приведенном ниже коде: Я снова запустил репо для простоты понимания: https://github.com/Angela-Inniss/hair-do

<% if @comment.persisted? %>
  // 1.create the html for the review
  newComment  = "<p><%= @comment.content %></p>"
  // 2. append the new review to the list
  comments = document.getElementById('beforeend', newComment);
  // 3. Empty out the input box
  inputBox = document.getElementById('new_comment');
  inputBox.value = "";
<%end%>

Answer 1

Мне удалось выяснить проблему.

Я не вставлял соседний HTML после строки 5 моего отредактированного кода файла create.js.erb.

Вот исправленный код в моем файле create.js.erb, который теперь позволяет пользователюопубликуйте комментарий и добавьте комментарий под остальными комментариями на странице и обновите поле комментария, чтобы оно оставалось пустым после публикации комментария.

  var newComment  = "<%= j render 'comments/show',comment: @comment%>";
  // 2. append the new review to the list
  var comments = document.getElementById('comments');
  comments.insertAdjacentHTML('beforeend', newComment)

  // 3. Empty out the input box
 var inputBox = document.getElementById('comment_content');
  inputBox.value = "";

спасибо

Answer 2

В вашем действии create вы перенаправляете на новую страницу, следовательно, вызываете перезагрузку страницы.В случае вызова AJAX вы хотите обработать файл js.erb, а не перенаправить

def create
  @hairstyle = Hairstyle.find(params[:hairstyle_id])
  @comment = Comment.new(comment_params)
  @comment.hairstyle = @hairstyle
  @comment.user = @user

  if @comment.save!
    respond_to do |format|
      format.js # will render your create.js.erb file in case of an ajax call
      format.html do
        redirect_to hairstyle_path(@hairstyle) # will redirect to the correct path in case of a html call
      end
    end
  else
    render 'hairstyles/show'
  end
end