Asynchronous communication introduces conversation functionality, but data cannot be displayed without reloading the page.

if Entry.where(:user_id=>current_user.id,:room_id=>params[:message][:room_id]).present?
    @message=Message.new(params.require(:message).permit(:user_id,:content,:room_id).merge(:user_id=>current_user.id))
    [email protected]
        response_to do | format |
            format.html {redirect_to:action=>"show",:controller=>"rooms",:id=>@message.room_id}
            format.json 
        end
    end
else
    redirect_back(fallback_location:root_path)
end

<%[email protected] event?%>
    <%@messages.each do | m | %>
    <strong><%=m.content%></strong>
    <small>by<strong><a href="/users/<%=m.user_id%>">%=m.user.email%>%>san</a>/strong>></small>
    <hr>
<%end%>
<%else%>
    <h3class="text-center"> No message yet</h3>
<%end%>

<%=form_for@message, id:"new_message" do | f | %>
    <%=f.text_field:content, class: "form__message", :placeholder=> "Please enter a message", :size=>70%>
    <%=f.hidden_field:room_id, class:"form_message",:value=>@r oom.id%>
    <br>
    <%=f.submit "Post", class: "form__message"%>
<%end%>

<script type="text/javascript">
    $(document).ready(function(){

        $('#new_message').on('submit', function(e){
            e.preventDefault();
            var formData = new FormData(this);
            var url = $(this).attr('action');
        })
    }

    $("#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
        })
    }

    $(document).ready(function(){
        function buildHTML (message) {
        var html=`<div class="message">
                        <div class="upper-message">
                            <div class="upper-message__user-name">
                                ${ content}
                            </div>
                        </div>
                    </div>`;
        }
        return false;

        function scroll() {
            $('.messages') .animate({scrollTop:$('.message')[0].scrollHeight});
        }

        $("#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 = buildHTML(data);
                $('.messages').append(html);
                $('.form__message').val(');
                $('.form__submit').prop('disabled', false);
            });
            scroll()
        });
    };
</script>

[email protected]
[email protected] ntent
[email protected]_id
[email protected]_id