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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

535閲覧

モーダルフォームから投稿した後暗い背景が残ってしまう

yk8710

総合スコア8

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2022/08/21 07:55

前提

初学者です。
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

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

$('#exampleModal').hide();

これはあくまでjQueryのhide()であってBootstrapのModalの機能を呼び出しているわけではないです。対象要素のstyle=display:noneとかにしてるだけ。

バージョンにはよりますが「任意のタイミングでモーダルを操作する」機能は準備されています。

Bootstrap4:Modal#Via JavaScript

閉じる場合は以下

js

1$('#myModal').modal('hide')

#myModalは対象モーダルの要素名(例ではid=myModal)

投稿2022/08/21 08:04

編集2022/08/21 08:10
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yk8710

2022/08/21 08:41

素早いご回答ありがとうございます。いただいた内容の通り修正後、新たにUncaught ReferenceError: $ is not definedというエラーが出ましたが下記の記事も参考にしたところ解決いたしました。ありがとうございました。 https://teratail.com/questions/280958
m.ts10806

2022/08/21 08:48 編集

>Uncaught ReferenceError: $ is not defined 元のコードでガンガンにjQuery使っていて今回の対応したところで新たに出るエラーではないと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問