The problem at hand:
This is my room.coffee file, and everything is functioning correctly.
jQuery(document).on 'turbolinks:load', ->
messages = $('#messages')
if $('#messages').length > 0
App.global_chat = App.cable.subscriptions.create {
channel: "ChatRoomsChannel"
chat_room_id: messages.data('chat-room-id')
},
connected: ->
# Called when the subscription is ready for use on the server
disconnected: ->
# Called when the subscription has been terminated by the server
received: (data) ->
# Data received
send_message: (message, chat_room_id) ->
@perform 'send_message', message: message, chat_room_id: chat_room_id
@import "bootstrap-sprockets";
@import "bootstrap";
#messages {
max-height: 450px;
overflow-y: auto;
.avatar {
margin: 0.5rem;
}
}
<h1><%= @chat_room.title %></h1>
<div id="messages" data-chat-room-id="<%= @chat_room.id %>">
<%= render @chat_room.messages %>
</div>
<hr>
<%= form_for @message, url: '#' do |f| %>
<%= hidden_field_tag 'chat_room_id', @chat_room.id %>
<div class="form-group">
<%= f.label :body %>
<%= f.text_area :body, class: 'form-control' %>
<small class="text-muted">From 2 to 1000 characters</small>
</div>
<%= f.submit "Post", class: 'btn btn-primary btn-lg' %>
<% end %>
However, problems arose when the following code was added to the same file, resulting in an ExecJS::RuntimeError:
$('#new_message').submit (e) ->
$this = $(this)
textarea = $this.find('#message_body')
if $.trim(textarea.val()).length > 1
App.global_chat.send_message textarea.val(), messages.data('chat-room-id')
textarea.val('')
e.preventDefault()
return false
I have extensively searched for similar issues, and it appears that most PC users have encountered this problem. However, I am using a Mac, and I am unsure why I am experiencing this error as well.