非同期通信で会話機能を導入しているのですが、ページをリロードしないで、データを表示することができません。


私は、今非同期通信で会話機能を導入しようと考えています。ページ移動なしで、データを表示することができるのですが、ページ移動・リロードなしで、表示することができない状態にあります。もしわかる方がいらしたら、方法を教えて頂きたいです。

[code]

    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))
        if @message.save
            respond_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
    
[/code]

[code]

    <% if @messages.present? %>
        <% @messages.each do |m| %>
        <strong><%= m.content %></strong>
        <small>by <strong><a href="/users/<%= m.user_id %>"><%= m.user.email %>さん</a></strong></small>
        <hr>
    <% end %>
    <% else %>
        <h3 class="text-center">メッセージはまだありません</h3>
    <% end %>
    
    <%= form_for @message,  id: "new_message" do |f| %>
        <%= f.text_field :content, class: "form__message", :placeholder => "メッセージを入力して下さい" , :size => 70 %>
        <%= f.hidden_field :room_id, class: "form__message", :value => @room.id %>
        <br>
        <%= f.submit "投稿する" , class: "form__message" %>
    <% end %>
    
[/code]

[code]

    <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>
    
[/code]

・jbuilder

[code]

    json.id @message.id
    json.content @message.content
    json.room_id @message.room_id
    json.user_id @message.user_id
    
[/code]




単純な文法間違い？`$.ajax()`の後ろに`.done()`をつなげる前に`;`が入ってるからじゃないですかね？？

