前提・実現したいこと
Rails初心者です。
Rails内のjQueryで自動スクロールを実装しようとしたのですが、うまく反映されず質問させていただきました。
ご回答いただけると非常に助かります。
発生している問題・エラーメッセージ
Rails内のjQueryで自動スクロールができない
該当のソースコード(message.js)
$(function(){ function buildMessage(message){ var html = `<div class="chat" data-chat-id="${message.id}"> <div class="chat-box"> <div class="chat-face"> <img style="width:100px; height:100px;" src="http://localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBDdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9a1a6ec25f629d85cdc814e24a22f2a07b002ab2/${message.avatar}"></div> <div class="chat-hukidashi"> <strong>${message.content}</strong> <br>${message.date} </div> </div> </div>` return html; } $("#new_message").on("submit", function(e){ e.preventDefault(); var formData = new FormData(this); var url = $(this).attr('action') $.ajax({ url: url, type: "POST", data: formData, dataType: "json", processData: false, contentType: false }) .done(function(data){ var html = buildMessage(data); $('.chats').append(html) $('.chats').animate({scrollTop: $('.chats')[0].scrollHeight}, 'fast'); $("form")[0].reset(); }) .fail(function(){ alert('error'); }) }) });
該当のソースコード(messages_controller)
class MessagesController < ApplicationController before_action :authenticate_user!, only: [:create] def create if Entry.where(user_id: current_user.id, room_id: params[:message][:room_id]).present? @message = Message.create(params.require(:message).permit(:user_id, :content, :room_id).merge(:user_id => current_user.id)) respond_to do |format| format.html { redirect_to "/rooms/#{@message.room_id}"} format.json end else @messages = messages.includes(:user) flash.now[:alert] = "メッセージを入力してください。" render template: "room/new" end end end
該当のソースコード(vies/messages/create.json.jbuilder)
json.content @message.content json.avatar @message.user.avatar json.user_name @message.user.name json.date @message.created_at.strftime("%Y/%m/%d %H:%M") json.id @message.id
補足情報(FW/ツールのバージョンなど)
Ajaxの非同期通信には成功しています。
Ruby version 2.5.1
Rails version 5.2.3
回答1件
あなたの回答
tips
プレビュー