質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.63%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 491

avicii

score 39

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

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

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))
         redirect_to :action => "show", :controller=>"rooms",:id => @message.room_id
       else
            redirect_back(fallback_location: root_path)
       end


 end
$(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

              })

          })

          $(function() {

                function buildHTML(message){

                var html =        `<div class="message">
                                       <div class="upper-message">
                                           <div class="upper-message__user-name">
                                               ${ message.content }
                                           </div>
                                       </div>
                                   </div>`;
                    return html;

                }
                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()

                })

                })
  json.id @message.id
  json.room_id @message.room_id
  json.user_id @message.user_id
  json.content @message.content
<% 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, url: :room, 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 %>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • Rubyに関する質問
  • 非同期通信でDM機能を導入しようとしているのですが、保存はできるのですが、表示がされない状態です。