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

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

ただいまの
回答率

90.36%

  • PHP

    21239questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    17445questions

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

  • Laravel 5

    2058questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

  • Ajax

    1149questions

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

javascript Uncaught TypeError: $(...).modal is not a function

解決済

回答 2

投稿

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

masateru2

score 23

Laravel5.6を使ってモーダルを表示させ、jsでPOSTを行おうとしていたのですが、Uncaught TypeError: $(...).modal is not a functionがでてうまくいきません。原因を調べていたところ、重インクルードが問題と書かれていたのですが、どこを見ても2重インクルードしているところが見つかりません。
デベロッパーモードでのエラーメッセージは下記の通りです

Uncaught TypeError: $(...).modal is not a function
    at HTMLAnchorElement.<anonymous> (post.js:3)
    at HTMLDocument.dispatch (jquery.min.js:3)
    at HTMLDocument.q.handle (jquery.min.js:3)
(anonymous) @ post.js:3
dispatch @ jquery.min.js:3
q.handle @ jquery.min.js:3
//post.js
//ajax form add
$(document).on('click','.create-modal',function(){
  $('#create').modal('show');
  $('.form-horizontal').show();
  $('.modal-title').text('Add Post');
});
//index.blade.php

@extends('layouts.app')
@section('content')
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <!-- Jquey -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/post.js"></script>
  </head>
  <body>

  </body>
</html>
<div class="row">
  <div class="col-md-12">
    <h1>OriginLaravel Ajax</h1>
  </div>
</div>

<div class="row">
  <div class="table table-responsive">
    <table class="table table-bordered" id="table">
      <tr>
        <th width="150px">No</th>
        <th>Title</th>
        <th>Body</th>
        <th>Create At</th>
        <th class="text-center" width="150px">
          <a href="#" class="create-modal btn btn-success btn-sm">
            <i class="fa fa-plus"></i>
          </a>
        </th>
      </tr>
      {{ csrf_field() }}
      @foreach ($post as $key => $value)
       <tr class="post{{$value->id}}">
         <td>{{ $no++ }}</td>
         <td>{{ $value->title }}</td>
         <td>{{ $value->body }}</td>
         <td>{{ $value->create_at }}</td>
         <td>
           <a href="#" class="show-modal btn btn-info btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}">
             <i class="fa fa-eye"></i>
           </a>
           <a href="#" class="show-modal btn btn-warning btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}">
             <i class="fa fa-pencil"></i>
           </a>
           <a href="#" class="show-modal btn btn-danger btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}">
             <i class="fa fa-trash"></i>
           </a>
         </td>
      @endforeach
    </table>
  </div>
</div>



//ここがJsとのやりとりをしているモーダル生成部分

<!-- Form create post -->
<div id="create" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form">
          <div class="form-group row add">
          <label class="control-label col-sm-2" for="title">Title :</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="title" name="title"
            placeholder="Your Title Here" required>
            <p class="error text-center alert alert-danger hidden"></p>
          </div>
        </div>
        <div class="form-group">
        <label class="control-label col-sm-2" for="body">Body :</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="body" name="body" placeholder="Your Title Here" required>
          <p class="error text-center alert alert-danger hidden"></p>
        </div>
      </div>
      </form>
    </div>
    <div class="modal-footer">
      <button class="btn btn-warning" type="submit" id="add">
        <span class="fa fa-plus"></span>Save Post
      </button>
      <button class="btn btn-warning" type="button" data-dismiss="modal">
        <span class="fa fa-remode"></span>Close
      </button>
    </div>
  </div>
</div>
</div>

@endsection
//app.blade.php


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>LaravelCRUD</title>

    <!-- bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <nav class="navbar navbar-default navbar-ststic-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="{{url('post')}}">Lravel CRUD</a>
        </div>
      </div>
    </nav>
    <div class="container">
      @yield('content')
    </div>
  </body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/07/10 14:08

    BootstrapのJSファイルはどこで読み込んでいるのでしょうか。

    キャンセル

  • masateru2

    2018/07/10 14:11

    app.blade.phpに書き込んであります

    キャンセル

  • mts10806

    2018/07/10 14:12

    CSSファイルは読み込まれているようですが、JSファイルは読み込まれていないようなので確認しています。

    キャンセル

回答 2

checkベストアンサー

+1

読み込んでいるCSSから、Bootstrap3.3.6 のようなので、
CSSだけでなくjsファイルも3.3.6を読み込む記述を入れてください。
CSS,JS,themeで1セットです。

別回答のコメントに4.0へのリンクを貼っていますが、バージョンが違うと動作は保証されません。
必ず全てのバージョンは同じものをご利用ください。
4.0にしたいのであれば全て4.0にしてください。

ちなみにエラーメッセージ
Uncaught TypeError: $(...).modal is not a function
直訳:「$(...).modalはfunctionではありません」
意訳:「.modal()なんて関数は存在しない」
JavaScriptのエラーなので一番疑わなければならないのは自身のコード内に該当するJavaScriptの記述が存在するかどうかです。
今回の質問者さんのコードには該当するJavaScriptの関数がどこにも用意されていません。
本来はBootstrapのJSファイルにて定義されているはずのものです。
フロントエンドの出来事なのでLaravelは関係ありませんね。


質問内容とは関係ないですが、index.blade.php がHTML構造上おかしいのでここは修正しておいてくださいね。
index.blade.phpの内容がそのままapp.blade.phpのcontentにおさまるようでしたら更におかしいことになります。
HTML構造がおかしいと幾らCSSフレームワークとは言え、正常に動作するか保証出来ないと思います。HTML構造、組み方にはきちんとお作法があるので、それは守ってください。
(まずそこをおさえないとやりたいWebアプリケーションは中々進みませんよ)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/10 14:43

    HTMLの構造はテンプレートから作っているので、body部分の問題でしょうか?

    キャンセル

  • 2018/07/10 15:36

    テンプレートから作っているのでしたらあくまで作り込みの問題でしょうね。
    必要なもの必要でないもの、構造をきちんと理解して整理して精査してください。

    キャンセル

0

そもそも.modal()と言うのはどこから出てきたMethodなんでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/10 14:22

    https://getbootstrap.com/docs/4.0/components/modal/

    キャンセル

  • 2018/07/10 14:23

    こちらでbootstrapのmodalを表示するかどうかのメソッドと書いてありました。

    キャンセル

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

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

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

  • PHP

    21239questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    17445questions

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

  • Laravel 5

    2058questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

  • Ajax

    1149questions

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