前提
初学者です。
Rails,Jquery,Bootstrapを使って簡単なメモ機能を実装しています。
実現したいこと
メモの投稿を非同期で実装する
発生している問題・エラーメッセージ
モーダルフォームから投稿した後、薄暗い背景が残ったままでボタンをクリックすることもできない状態になります。わざわざリロードしないと消えません。コンソールにて特にエラー文は出てきておりませんが、現在の挙動のGyazoのリンクを貼り付けます。https://gyazo.com/6533af5aad4bcc9be732dce2b60c20e4
このような現象についてなかなかいい情報に辿りつけず苦戦しましたので、もしお分かりになる方いらっしゃいましたらご教示いただけますと幸いです。
該当のソースコード
app/views/memos/index.html.erb
1<div class="container mt-5"> 2 <div class="row"> 3 <div class="col-3"> 4 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> 5 メモ投稿 6 </button> 7 </div> 8 <div class="col-9 memos"> 9 <%= render 'memos', memos: @memos %> 10 </div> 11 </div> 12</div> 13 14 15<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> 16 <div class="modal-dialog"> 17 <div class="modal-content"> 18 <div class="modal-header"> 19 <h5 class="modal-title" id="exampleModalLabel">メモ投稿</h5> 20 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 21 </div> 22 <%= form_for @memo, remote: true do |f| %> 23 <div class="modal-body"> 24 <div class="form-group"> 25 <%= f.label "商品名" %> <br> 26 <%= f.text_field :name %> 27 </div> 28 <div class="form-group"> 29 <%= f.label "備考" %> <br> 30 <%= f.text_area :contents %> 31 </div> 32 </div> 33 <div class="modal-footer"> 34 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button> 35 <%= f.submit "追加", class:"btn btn-primary" %> 36 </div> 37 <% end %> 38 </div> 39 </div> 40</div> 41
app/views/memos/_memos.html.erb
1<div class="split-item split-right"> 2 <div class="split-right__inner"> 3 <h1 class="text-center">メモリスト</h1> 4 <table class="table mt-4"> 5 <thead> 6 <tr> 7 <th scope="col">商品</th> 8 <th scope="col">備考</th> 9 <th scope="col"></th> 10 </tr> 11 </thead> 12 <tbody> 13 <% @memos.each do |memo| %> 14 <tr> 15 <td><%= memo.name %></td> 16 <td><%= memo.contents %></td> 17 <td><%= link_to "削除", memo_path(memo.id), method: :delete %></td> 18 </tr> 19 <% end %> 20 </tbody> 21 </table> 22 </div> 23 </div> 24</div>
app/views/memos/craete.js.erb
1$("textarea").val(""); 2$("input").val(""); 3$('#exampleModal').hide(); 4$('.memos').html("<%= escape_javascript(render 'memos', memos: @memos) %>")
app/controller/memos_controller.rb
1class MemosController < ApplicationController 2 before_action :authenticate_user! 3 4 def index 5 @memos = Memo.where(user_id: current_user.id).includes(:user).order("created_at DESC") 6 @memo = Memo.new 7 end 8 9 def create 10 Memo.create(memo_params) 11 @memos = Memo.where(user_id: current_user.id).includes(:user).order("created_at DESC") 12 end 13 14 def destroy 15 @memo = Memo.find(params[:id]) 16 redirect_to memos_path if @memo.destroy 17 end 18 19 private 20 21 def memo_params 22 params.require(:memo).permit(:name, :contents).merge(user_id: current_user.id) 23 end 24 25 26end
試したこと
turbolinksが悪さをしているのか?と考え/app/javascripts/packs/application.jsのrequire("turbolinks").start()の部分を消したりなどしましたが変わらず。飛んだ見当違いでした。
補足情報(FW/ツールのバージョンなど)
Ruby 2.6.5
Rails 6.0.5.1
jquery '3.6.0'
Bootstrap 5.2.0
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/08/21 08:41
2022/08/21 08:48 編集