非同期通信でDM機能を導入しようとしているのですが、保存はできるのですが、表示がされない状態です。

私は、今非同期通信でDM機能を導入しようと考えています。しかし、送信したデータ自体は保存がされるのですが、保存された内容が反映されない状態にあります。もしわかる方がいらしたら、教えていただきたいです。

参考にしたサイト
https://qiita.com/nojinoji/items/2b3f8309a31cc6d88d03
https://haayaaa.hatenablog.com/entry/2018/10/03/012925

controller
1def create
2       if Entry.where(:user_id => current_user.id, :room_id => params[:message][:room_id]).present?
3         @message = Message.create(params.require(:message).permit(:user_id, :content, :room_id).merge(:user_id => current_user.id))
4         redirect_to :action => "show", :controller=>"rooms",:id => @message.room_id
5       else
6       	 redirect_back(fallback_location: root_path)
7       end
8
9        
10 end

javascript
1$(function() {
2
3              $('#new_message').on('submit', function(e) {
4
5                  e.preventDefault();
6
7                  var formData = new FormData(this);
8
9                  var url = $(this).attr('action');
10
11              })
12
13          })
14
15          $("#new_message").on('submit', function(e) {
16
17              e.preventDefault();
18
19              var formData = new FormData(this);
20
21              var url = $(this).attr('action');
22
23              $.ajax({
24
25              url: url,
26
27              type: "POST",
28
29              data: formData,
30
31              dataType: 'json',
32
33              processData: false,
34
35              contentType: false
36
37              })
38
39          })
40
41          $(function() {
42
43                function buildHTML(message){
44
45                var html =        `<div class="message">
46                                       <div class="upper-message">
47                                           <div class="upper-message__user-name">
48                                               ${ message.content }
49                                           </div>
50                                       </div>
51                                   </div>`;
52                    return html;
53
54                }
55                function scroll() {
56
57                    $('.messages').animate({scrollTop: $('.message')[0].scrollHeight});
58
59                }
60
61                $("#new_message").on('submit', function(e) {
62
63                    e.preventDefault();
64
65                    var formData = new FormData(this);
66
67                    var url = $(this).attr('action');
68
69                    $.ajax({
70
71                    url: url,
72
73                    type: "POST",
74
75                    data: formData,
76
77                    dataType: 'json',
78
79                    processData: false,
80
81                    contentType: false
82
83                    })
84
85                    .done(function(data){
86
87                        var html = buildHTML(data);
88
89                        $('.messages').append(html);
90
91                        $('.form__message').val('');
92
93                        $('.form__submit').prop('disabled', false);
94
95                    })
96                    scroll()
97
98                })
99
100                })

jbuilder
1  json.id @message.id
2  json.room_id @message.room_id
3  json.user_id @message.user_id
4  json.content @message.content

view
1<% if @messages.present? %>
2            <% @messages.each do |m| %>
3              <strong><%= m.content %></strong>
4              <small>by <strong><a href="/users/<%= m.user_id %>"><%= m.user.email %>さん</a></strong></small>
5              <hr>
6            <% end %>
7          <% else %>
8            <h3 class="text-center">メッセージはまだありません</h3>
9          <% end %>
10
11    <%= form_for @message, url: :room, id: "new_message" do |f| %>
12      <%= f.text_field :content, class: "form__message", :placeholder => "メッセージを入力して下さい" , :size => 70 %>
13      <%= f.hidden_field :room_id, class: "form__message", :value => @room.id %>
14      <br>
15      <%= f.submit "投稿する", class: "form__message" %>
16    <% end %>