Rails：使用remote：true来停止页面刷新 [英] Rails: Using remote: true to stop page refresh

问题描述

我有一个 projects / show.html.erb 页面。一个项目has_many project_messages ，并且从 projects / show.html.erb 页面，用户可以创建一个新的 project_message 但是，当通过 _form project_message 时成功> partial，页面刷新。

I have a projects/show.html.erb page. A project has_many project_messages and from the projects/show.html.erb page, a user can create a new project_message successfully, however, when the new project_message is created through a _formpartial, the page refreshes.

我想使用：remote => true将 project_messages 添加到项目中无需刷新页面。
请参阅下面我使用的代码。这不起作用，页面仍然刷新。我是rails的新手，所以非常感谢任何帮助。

I want to use :remote => true to add project_messages to the project without having to refresh the page. Please see the code I used below. This does not work and the page still refreshes. I am new to rails so any help would be greatly appreciated.

请参阅下面每个文件的代码

Please see the code for each file below

在 projects / show.html.erb 中显示project_message并创建一个新的project_message，我有以下代码成功：

In projects/show.html.erbto display the project_message and create a new project_message, I have the following code which is successful:

<div class="au-chat au-chat--border">
   <div class="au-message-list">
         <% @project.project_messages.each do |project_message| %>
         <%= render partial: 'project_messages/project_message', locals: { project_message: project_message } %>
         <% end %><br>
   </div>


   <div class="au-chat-textfield">, 
         <%= render partial: 'project_messages/form', locals: { project_message: @project_message } %>                                                 
   </div>
</div>

在 project_messages_controller.rb 文件中创建方法如下，我已添加 format.js {}

In the project_messages_controller.rb file the create method is as follows, I have added format.js { }

  def create
    @project_message = ProjectMessage.new(project_message_params)
    @project_message.user_id = current_user.id if current_user
    @project_message.project_id = current_user.team.project_id if current_user

    respond_to do |format|
      if @project_message.save
        format.html { redirect_to @project_message.project }
        format.json { render :show, status: :created, location: @project_message }
        format.js   { }
      else
        format.html { render :new }
        format.json { render json: @project_message.errors, status: :unprocessable_entity }
      end
    end
  end

project_message _form partial然后包括：remote => true

The project_message _form partial then includes the :remote => true

<%= form_with(model: project_message, local: true, :remote => true) do |form| %>
  <% if project_message.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(project_message.errors.count, "error") %> prohibited this project_message from being saved:</h2>

      <ul>
      <% project_message.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

<%= form.text_field :pMessage, id: :project_message_pMessage, :class => 'au-input au-input--full au-input--h65', placeholder: 'Type a message' %>
  <div class="actions" >
    <%= form.submit "Send" %>
  </div>
<% end %>

然后我创建了一个新的 create.js.erb views / project_messages / create.js.erb中的文件，并添加了以下代码：

I then created a new create.js.erb file in views/project_messages/create.js.erb and added the following code:

# confirm file called
console.log('create.js.erb file');

# add new comment to end of comments section
$("#project_message").append("<%= j render(@project_message) %>");

使用上面的代码，页面仍会刷新。
当我从 project_message _form local：true $ c> partial，它不刷新并创建模型，但 projects / show.html.erb 视图未更新！

With the code above, the page still refreshes. When I remove local: true from the project_message _form partial, it does not refresh and creates the model but the projects/show.html.erb view is not updated!

我使用以下链接此处以及stackoverflow上的其他帖子

I used the following link here and also other posts on stackoverflow

推荐答案

你可以使用传统的form_for http://guides.rubyonrails.org/working_with_javascript_in_rails.html#remote-elements

you can use traditional form_for http://guides.rubyonrails.org/working_with_javascript_in_rails.html#remote-elements

更新以下代码中的代码
<％= form_for project_message，：remote =>真的做|形式| ％>

update below code in your views <%= form_for project_message, :remote => true do |form| %>

并确保您的ID为< div class =au-的html元素消息列表id =project_message>

这篇关于Rails：使用remote：true来停止页面刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！