0

I am having an issue while trying to replicate Michael Hartl ActionCable tutorial https://www.learnenough.com/action-cable-tutorial (I have no knowledge in Coffeescript nor much in JS)

Especially section 4.3 when author is altering app/assets/javascripts/channels/room.coffee in order to empty input field after the new message has been created and appended to correct DIV.

App.room = App.cable.subscriptions.create "RoomChannel",
  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) ->
    $('#messages-table').append '<div class="message">' +
        '<div class="message-user">' + data.username + ":" + '</div>' +
        '<div class="message-content">' + data.content + '</div>' + '</div>'

$(document).on 'turbolinks:load', ->
  submit_message()

submit_message = () ->
  $('#message_content').on 'keydown', (event) ->
    if event.keyCode is 13
      console.log(event)

I am trying to tweak this code for my very app. Here is my attempt:

App.conversationsdevis = App.cable.subscriptions.create "ConversationsdevisChannel",
  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) ->
    $('#cellmessagesde'+data.cellid).append '<div class="'+data.auteur+'">'+'<span>'+data.message+'</span>'+'</div>'

$(document).on 'turbolinks:load', ->
  submit_message()

submit_message = () ->
  $('#cellenvoi'+data.cellid).on 'keydown', (event) ->
    if event.keyCode is 13
      $('input').click()
      event.target.value = ""
      event.preventDefault()

It's pretty much the same except that it seems that my second call to data.cellid is not taken in.

My app has multiple chat rooms on the same page, therefore I have to select the right ID. I do this dynamically through data.cellid

I tried to move the last bits of code below received: (data) -> but still doesn't work

EDIT EDIT EDIT

data is comming from the controller for the chatrooms messages called devimessages Here is the create action : 

def create
    unless params[:devimessage][:message].empty? then
    @message = @devimessageable.devimessages.new(devimessage_params)
      if @message.save
        ActionCable.server.broadcast 'conversationsdevis_channel', message: @message.message, auteur: @message.auteur, cellid: @message.devimessageable_type.to_s+@message.devimessageable_id.to_s
      end
    end

  end

There are three methods to data : message, auteur (author) and cellid (which return a string that is matching the correct ID)

Also for understanding: @devimessageable is inherited from a private function that recover polymorphic association type and ID (because the messages belong to different chatrooms of different models, I name the DIV containing the messages according to their model name and Id in my view)

Maxence
  • 2,029
  • 4
  • 18
  • 37
  • 2
    Where are you expecting `data` to come from in `submit_message = () ->`? There is a `data` argument up in `received` but nothing visible to `submit_message`. Maybe you should be using a class-selector instead of an id-selector. – mu is too short Jun 02 '17 at 01:48
  • Are you able to get data in received: (data). Please confirm that by putting a alert message, If you are getting the data then I think I know the problemn – ritzz.soni Jun 02 '17 at 05:51
  • one more issue. $('#cellenvoi'+data.cellid).on 'keydown', (event) -> If you see data is not present here. – ritzz.soni Jun 02 '17 at 05:53
  • I have updated with controller where `data` is set. But not sure if useful cause my coffescript file is kinda working. At least what is beneath `received: (data) ->` ... but only the first line... (My message is indeed added to my DIV and new message is appended. ) the other coffescript function don't inherit `data` either – Maxence Jun 02 '17 at 09:17
  • Actually this is a coffescript issue : how to make all fucntions inherit `received: (data) ->` – Maxence Jun 02 '17 at 09:18
  • Ok I was stupid to try to target an ID, I targetted a class and it works perfectly. I dont care if all elements of same class behave the same as it is not specific data to be appended. It's just cleaning the input. – Maxence Jun 02 '17 at 19:49

0 Answers0