CODEWITHSUNDEEP
javascriptruby-on-railsruby
JDSlimz
JDSlimz

Reputation: 113

Ruby on Rails is printing the JS to the screen when I have it respond

Messing around with Ruby on Rails doing some hands on learning. I have reached a point where I would like for the form to submit and the controller to respond with JS. instead it prints the JS on the screen...

Messages Controller:

class MessagesController < ApplicationController
    def index
        @messages = Message.all
        @message = Message.new
    end

    def new
        @message = Message.new
    end

    def create 
        @message = Message.new(message_params) 
        if @message.save 
            @messages = Message.all
            @message = Message.new
            respond_to do |format|
                format.js {}
                end a
        else 
            render 'new' 
        end 
    end

    private 
        def message_params 
        params.require(:message).permit(:content) 
    end

end

Messages Page (HTML):

<div class="header">
  <%= stylesheet_link_tag "chat.css" %>
  <%= javascript_include_tag "jQuery.js" %>
  <%= javascript_include_tag "chat.js" %>
  <div class="container">
    <h1>Messenger</h1>
  </div>
</div>

<div class="messages">
  <div id="messages_scroll" class="container">
    <% @messages.each do |message| %> 
        <div class="message"> 
          <p class="content"><%= message.content %></p> 
          <h6 class="time"><%= message.created_at %></h6> 
        </div> 
    <% end %>
  </div>

    <br>
    <%= form_for @message, :remote => true do |f| %>  
      <div class="field"> 
        <%= f.label :message %><br> 
        <%= f.text_area :content %> 
      </div> 
      <div class="actions"> 
        <%= f.submit "Create" %> 
      </div> 
    <% end %>
</div>

Create.js.erb:

$('#messages_scroll').html('\
    <% @messages.each do |message| %> \
        <div class="message"> \
            <p class="content"><%= message.content %></p> \
            <h6 class="time"><%= message.created_at %></h6> \
        </div> \
    <% end %>');

What happens when I submit a new message: JS Prints on Page

Upvotes: 0

Views: 360

Answers (1)

Wes Foster
Wes Foster

Reputation: 8900

Try this:

create.js.erb

$('#messages_scroll').html("<%= j(render(@messages)) %>");

_message.html.erb (in the same directory)

<div class="message">
  <p class="content"><%= message.content %></p>
  <h6 class="time"><%= message.created_at %></h6>
</div>

Upvotes: 2

Related Questions