Question

我有一个表单和一个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>

有人能帮帮我吗？谢谢。

Answer 1

假设你有一个带有id消息的div，你正在渲染消息，例如

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

在您的创建操作上，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 %>');

编辑：在您的特定情况下，您需要定位ul。所以你的create.js.erb将是

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

j只是escape_javascript的快捷方式。 Docs

这应该让你开始，但如果邮件没有保存，你会想通过ajax做其他事情。

如何在不刷新Rails中的页面的情况下显示添加的元素

1 个答案: