используя Rails ActionCable для создания живого чата, но .scrollTop jQuery не работает - PullRequest
Новая
       13

используя Rails ActionCable для создания живого чата, но .scrollTop jQuery не работает

0 голосов
/ 31 января 2019

В javascripts/channels У меня есть этот messages.js файл с двумя функциями - 1) для добавления данных в представление, очистки формы и проверки прокрутки div для отображения последнего отправленного сообщения, и 2) помощник для содержания сообщения.

Файл выглядит следующим образом: 

App.messages = App.cable.subscriptions.create('MessagesChannel', {
 received: function(data) {
  $("#response").val("");
  $("#conversation-main").scrollTop($("#conversation-main")[0].scrollHeight);
  return $('#messages').append(this.renderMessage(data));
 },

 renderMessage: function(data) {
  return "<div class='message'><div><strong>" + data.user + ":</strong> " + data.body + "</div><div class='date'>" + data.time + "</div></div>"
 }
});

Моя проблема в том, что сообщение добавляется, но scrollTop не выполняется.Почему это?Дополнительно - если я изменю этот файл на js.erb и использую помощник simple_format, добавление будет полностью предотвращено.Данные все еще сохраняются, и подписка веб-сокетов отправляется и принимается, но представление не обновляется с новым сообщением, добавленным в конец div.Должен ли я определить это поведение в другом месте?Вид выглядит так: 

<div class="column">
 <div class="conversation" id="conversation-main">
  <div id="conversation-body" data-conversation-id="<%= @conversation.id %>">
   <div id="messages">
    <% @messages.each do |message| %>
     <% if message.body %>
      <%= render "message", message: message %>
     <% end %>
    <% end %>
   </div>
  </div>
 </div>
</div>

<div class="column">
 <div class="ui form"> 
  <%= form_for [@conversation, @message], remote: true do |f| %>
   <div class="field">
    <%= f.label :message %>
    <%= f.text_area :body, placeholder: "Your message", id:"response" %>
   </div>
   <%= f.submit "Submit" %>
  <% end %>
 </div>
</div>

1 Ответ

0 голосов
/ 05 февраля 2019

Вы добавляете сообщение, после того как вы scrollTop.Попробуйте сделать 

App.messages = App.cable.subscriptions.create('MessagesChannel', {
 received: function(data) {
  $("#response").val("");
  $('#messages').append(this.renderMessage(data));
  $("#conversation-main").scrollTop($("#conversation-main")[0].scrollHeight);
 },

 renderMessage: function(data) {
  return "<div class='message'><div><strong>" + data.user + ":</strong> " + data.body + "</div><div class='date'>" + data.time + "</div></div>"
 }
});

Я не думаю, что вам нужно возвращаться из первой функции.Но вам определенно нужно знать высоту элемента div, включая самое новое сообщение, чтобы увидеть прокрутку до конца элемента div после ввода сообщения.

...