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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

解決済

モーダル画面でエラー Uncaught TypeError: $(...).modal is not a function が出てしまう

mikannOishiii
mikannOishiii

総合スコア6

Ruby on Rails 6

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

1回答

0評価

0クリップ

3333閲覧

投稿2020/04/02 11:25

前提・実現したいこと

rails6 にてモーダル画面から記録を登録する画面を作っています。
「記入する」ボタンを押すとモーダル画面が表示され、記録をつけることができ、保存・更新されるとモーダルが閉じる仕様を実現したいです。

しかし、コンソールにて以下のようなエラーが表示され、記録自体はできますがモーダルを閉じることができません。
Uncaught TypeError: $(...).modal is not a function

発生している問題・エラーメッセージ

console

Uncaught TypeError: $(...).modal is not a function at <anonymous>:2:19 at processResponse (rails-ujs.js:283) at rails-ujs.js:196 at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)
起きている問題
  • モーダルを開くとエラー文表示される(この時の見た目の不具合はなく、、モーダル自体は普通に表示されます。)
  • 記録をつけて保存しようとすると、モーダルが閉じない。(記録はできている)

該当のソースコード

以下、モーダルリンクが設置してある共通画面(抜粋)と、モーダル画面の中身(form)です。どちらもAjaxに対応するために remote: trueを設置しています。

erb

<nav class="nav-menu d-none d-lg-block"> <ul> <li class="get-recorded"> <%= link_to "記入する", new_record_path, remote: true, id: "record-modal", data: {toggle: "modal", target: "#recordModal"} %> </li> <li><%# メニュー省略 %></li> <li><%# メニュー省略 %></li> </ul> </nav><!-- .nav-menu --> <%# 中略 %> <div class="modal" id="recordModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"></div>

erb

<!-- Modal --> <div class="modal-dialog" role="document"> <div class="modal-content"> <%= form_for @record, remote: true do |f| %> <% if @record.errors.any? %>   <%# エラーある場合ここに表示(省略) %> <% end %> <div class="form-group"> <%= f.label :date, for: "inputDate" %> <%= f.date_field :date, class: "form-control", id: "inputDate", value: @record.date %> </div> <p class="rcd-lbl">朝:</p> <div class="form-row"> <div class="form-group col-md-4"> <%= f.label :m_sbp, for: "inputM_SBP", class: "sr-only" %> <%= f.telephone_field :m_sbp, placeholder: "最高血圧", class: "form-control", id: "inputM_SBP", value: @record.m_sbp %> </div> <%# 以下フォーム省略 %> </div> <div class="form-group"> <%= f.submit "記録する", class: "btn btn-block btn-blue", id: "record-btn" %> </div> <% end %> </div> </div>

以下、コントローラーです。新規も編集も同じモーダル画面から入力できるようになっていて、今日の日付の記録がない場合は新規登録、ある場合はフォームに記録が表示され編集・更新できる仕様になっています。save, update 自体はできていますが、noticeやエラー文は表示されません。

rb

# app/controllers/records_controller.rb def new @user = current_user default_day = Time.now if @user.records.exists?(date: default_day) @record = @user.records.find_by(date: default_day) else flash.now[:danger] = 'errored!' @record = Record.new(date: default_day) end end def create @record = Record.new(record_params) respond_to do |format| if @record.save format.html{ redirect_to root_url, notice: 'Record was successfully created.'} format.js else format.html{ render :new, record: @record} format.json{ render json: @record.errors, status: :unprocessable_entity} end end end def update @user = current_user @record = @user.records.find_by(date: params[:record][:date]) respond_to do |format| if @record.update_attributes(record_params) format.html { redirect_to root_url, notice: 'Record was successfully updated.' } format.js else format.html { render :new, record: @record } format.json { render json: @record.errors, status: :unprocessable_entity } format.js end end end

以下、モーダルの開閉画面のjsです。開くけれどエラー文が表示されます。また、閉じるほうは反応しません。(後述にある設定変更をすると閉じるようになります。)

erb

<%# app/views/records/new.js.erb %> $("#recordModal").html("<%= escape_javascript(render 'form', record: @record) %>") $("#recordModal").modal("show")

erb

<%# app/views/records/create.js.erb %> <%# app/views/records/update.js.erb %> $("#recordModal").modal("hide");

以下、bootstrap, jquery を使用するために設定している内容です。rails6を利用しているため、webpackerで入れました。

js

# app/javascript/packs/application.js require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require("jquery") # このアプリ用に入れたjs require("chartkick") require("chart.js") # import import 'bootstrap'; import '../stylesheets/application';

js

# config/webpack/environment.js const { environment } = require('@rails/webpacker') const webpack = require('webpack') environment.plugins.prepend('Provide', new webpack.ProvidePlugin({ $: 'jquery/src/jquery', jQuery: 'jquery/src/jquery', Popper: ['popper.js', 'default'] }) )

試したこと

こちらの記事を参考に、jsの読み込みを設定変更するとエラーは消えます。
(application.js と environment.js の変更)
https://stackoverflow.com/questions/58371711/bootstrap-hide-modal-not-working-in-rails-6-using-ajax
記録が保存・更新されモーダルが閉じるようになりますが、
設定してある notice や エラーの render は無視されてしまいます。
他にも記事を読む限り、javascriptの読み込みが影響しているのではないかと思うのですが、経験値が少なくここまでしか分かりませんでした。

補足情報(FW/ツールのバージョンなど)

ruby '2.6.5'
rails '6.0.2'

どなたかお知恵のある方ご助言いただけると嬉しいです。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Ruby on Rails 6

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。