Rails: Using remote: true to stop page refresh

Question

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.

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

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>

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

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 %>

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) %>");

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!

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

Answer 1

respond_to do |format|
format.js { render 'project_messages/create.js'} end

Answer 2

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

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

and make sure that you a html element with id like <div class="au-message-list" id="project_message">

Answer 3

it seems you are using Rails 5

remove remote: true and local: true from your code

read about this in here

and make sure that you a html element with id = project_message

your code is $("#project_message").append("<%= j render(@project_message) %>");

so check your HTML code , is there any element with ID like that