Rails Action Cable scroll down after message posting

Question

I configured action cable, now I would like to use the following js function

$('.scroll-bar').scrollTop(row);

to scroll down the chat after submitting a message

So I tried to include the previous code in both app/assets/channels/messages.js and app/assets/javascripts/room.js .

The problem is until after I execute app/assets/channels/messages.js the html does not have then new <p></p> tag appended.

App.messages = App.cable.subscriptions.create('MessagesChannel', {  
  received: function(data) {
    $("#messages").removeClass('hidden')
    return $('#messages').append(this.renderMessage(data));
  },
  renderMessage: function(data) {
    return "<p> <b>" + data.user + ": </b>" + data.message + "</p>";
  }
});

This are my chat messages, I can not run .scrollTop(row) on a row that does not still exist.

I tested and the <p> tags are added after messages.js .

I found a temporary solution to solve this, by commenting return from return $('#messages').append(this.renderMessage(data)); and calling after the .scrollTop(row) method. The solution works, but this way only the html is appended to the page without <p> tags.. Somehow renderMessage is not working properly.

I am available for any info

Thanks a lot Fabrizio Bertoglio

Answer 1

This is my temporary solution, not working correctly, because like this I will not append a <p> tag but just the text.

Basically like this the I am just appending the html without "<p> <b>" + data.user + ": </b>" + data.message + "</p>"

You can see from the picture below that the message is not inside <p> tags.

This is what I have done, I commented the return to execute the .scrollTop() function after $('#messages').append(this.renderMessage(data)) ;

app/assets/channels/messages.js

App.messages = App.cable.subscriptions.create('MessagesChannel', {  
  received: function(data) {
    $("#messages").removeClass('hidden');
    $('#messages').append(this.renderMessage(data));
    height = $('.scroll-bar')[0].scrollHeight;
    $('.scroll-bar').scrollTop(height);
    /*return $('#messages').append(this.renderMessage(data));*/
  },
  renderMessage: function(data) {
    return "<p> <b>" + data.user + ": </b>" + data.message + "</p>";
  }
});

I think the solution is hear , from this post I followed to implement action cable, I don't understand who is directly calling the received: function(data) {}

is it the callback method subscribed inside messages_channel.rb ?

class MessagesChannel < ApplicationCable::Channel 
    def subscribed
        stream_from 'messages'
    end 
end  

I don't have a clear idea how this callback method is calling the other method and how is the application flow.

Heroku Action Cable