Как показать добавленные элементы без обновления страницы в Rails

У меня есть форма и div для отображения сообщения, которое отправляется по форме. Я должен обновить страницу после отправки сообщения по форме, чтобы увидеть сообщения в моем div. Тем не менее, я хочу видеть сообщения в div без обновления страницы, как чат. Я пытался использовать Ajax, но не смог.

Вот моя форма:

<%= form_for @message, remote:true do |f| %>

<%= f.text_area :body, class: "form-control", placeholder: "Enter Message" %>
<%= f.submit "Send", class: 'btn btn-primary btn-lg' %>

<% end %>

И вот мой контроллер

class MessagesController < ApplicationController

  def index
    @messagesAll = Message.all
    @message = Message.new
  end

  def new
    @message = Message.all
  end

  def create
    @message = Message.new(params.require(:message).permit(:user, :body))
    if @message.save
      respond_to do |format|
        format.js {}
        format.html {redirect_to messages_url}
      end
    else
      render 'new'
    end

  end

end

А вот мой div:

<div class="panel-body" id="messages-div">
    <ul class="media-list">
        <% @messagesAll.each do |post| %>
            <li class="media">
                <%= post.body %>
            </li>
        <% end %>
    </ul>
</div>

Кто-нибудь может мне помочь? Спасибо!.

1 ответ

  1. Предполагая, что у вас есть div с идентификатором сообщений, которые вы передаете сообщения, например

    <div id="messages">
      <%= render @messages %>
    </div>
    

    На вашем create action rails будет искать create.js.erbфайл. Так что вы хотите это в вашем контроллере:

    respond_to do |format|
      format.js {}
      format.html {redirect_to messages_url}
    end
    

    Тогда есть create.js.erbфайл:

    $('#messages').append('<%= j render @message %>');
    

    Edit: в вашем конкретном случае вам нужно было бы нацелиться на ul. Так ваш create.js.erbбыл бы

    $('#messages-div ul.media-list').append('<li class="media"><%= j @message.body %></li>');
    

    j — это просто ярлык для escape_javascript. Docs

    Это должно помочь вам начать, но вы захотите сделать что-то еще с помощью ajax, если сообщение не будет сохранено.