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

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

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

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

JavaScript

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

Ajax

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

Laravel 5

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

Q&A

解決済

2回答

11013閲覧

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

masateru2

総合スコア39

PHP

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

JavaScript

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

Ajax

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

Laravel 5

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

0グッド

0クリップ

投稿2018/07/10 05:06

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

js

1//post.js 2//ajax form add 3$(document).on('click','.create-modal',function(){ 4 $('#create').modal('show'); 5 $('.form-horizontal').show(); 6 $('.modal-title').text('Add Post'); 7}); 8

php

1//index.blade.php 2 3@extends('layouts.app') 4@section('content') 5<!DOCTYPE html> 6<html lang="ja" dir="ltr"> 7 <head> 8 <meta charset="utf-8"> 9 <title></title> 10 <!-- Jquey --> 11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 12 <script type="text/javascript" src="js/post.js"></script> 13 </head> 14 <body> 15 16 </body> 17</html> 18<div class="row"> 19 <div class="col-md-12"> 20 <h1>OriginLaravel Ajax</h1> 21 </div> 22</div> 23 24<div class="row"> 25 <div class="table table-responsive"> 26 <table class="table table-bordered" id="table"> 27 <tr> 28 <th width="150px">No</th> 29 <th>Title</th> 30 <th>Body</th> 31 <th>Create At</th> 32 <th class="text-center" width="150px"> 33 <a href="#" class="create-modal btn btn-success btn-sm"> 34 <i class="fa fa-plus"></i> 35 </a> 36 </th> 37 </tr> 38 {{ csrf_field() }} 39 @foreach ($post as $key => $value) 40 <tr class="post{{$value->id}}"> 41 <td>{{ $no++ }}</td> 42 <td>{{ $value->title }}</td> 43 <td>{{ $value->body }}</td> 44 <td>{{ $value->create_at }}</td> 45 <td> 46 <a href="#" class="show-modal btn btn-info btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}"> 47 <i class="fa fa-eye"></i> 48 </a> 49 <a href="#" class="show-modal btn btn-warning btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}"> 50 <i class="fa fa-pencil"></i> 51 </a> 52 <a href="#" class="show-modal btn btn-danger btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}"> 53 <i class="fa fa-trash"></i> 54 </a> 55 </td> 56 @endforeach 57 </table> 58 </div> 59</div> 60 61 62 63//ここがJsとのやりとりをしているモーダル生成部分 64 65<!-- Form create post --> 66<div id="create" class="modal fade" role="dialog"> 67 <div class="modal-dialog"> 68 <div class="modal-content"> 69 <div class="modal-header"> 70 <button type="button" class="close" data-dismiss="modal">&times;</button> 71 <h4 class="modal-title"></h4> 72 </div> 73 <div class="modal-body"> 74 <form class="form-horizontal" role="form"> 75 <div class="form-group row add"> 76 <label class="control-label col-sm-2" for="title">Title :</label> 77 <div class="col-sm-10"> 78 <input type="text" class="form-control" id="title" name="title" 79 placeholder="Your Title Here" required> 80 <p class="error text-center alert alert-danger hidden"></p> 81 </div> 82 </div> 83 <div class="form-group"> 84 <label class="control-label col-sm-2" for="body">Body :</label> 85 <div class="col-sm-10"> 86 <input type="text" class="form-control" id="body" name="body" placeholder="Your Title Here" required> 87 <p class="error text-center alert alert-danger hidden"></p> 88 </div> 89 </div> 90 </form> 91 </div> 92 <div class="modal-footer"> 93 <button class="btn btn-warning" type="submit" id="add"> 94 <span class="fa fa-plus"></span>Save Post 95 </button> 96 <button class="btn btn-warning" type="button" data-dismiss="modal"> 97 <span class="fa fa-remode"></span>Close 98 </button> 99 </div> 100 </div> 101</div> 102</div> 103 104@endsection 105

php

1//app.blade.php 2 3 4<!DOCTYPE html> 5<html lang="ja"> 6 <head> 7 <meta charset="utf-8"> 8 <title>LaravelCRUD</title> 9 10 <!-- bootstrap --> 11 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 12 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 13 </head> 14 <body> 15 <nav class="navbar navbar-default navbar-ststic-top"> 16 <div class="container"> 17 <div class="navbar-header"> 18 <a class="navbar-brand" href="{{url('post')}}">Lravel CRUD</a> 19 </div> 20 </div> 21 </nav> 22 <div class="container"> 23 @yield('content') 24 </div> 25 </body> 26</html> 27

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

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

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

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

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

m.ts10806

2018/07/10 05:08

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

2018/07/10 05:11

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

2018/07/10 05:12

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

回答2

0

ベストアンサー

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

※CDNの記述もありますので適宜ご利用ください。

別回答のコメントに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 05:28

編集2018/07/10 05:35
m.ts10806

総合スコア80765

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

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

masateru2

2018/07/10 05:43

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

2018/07/10 06:36

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

0

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

投稿2018/07/10 05:15

kunai

総合スコア5405

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

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

masateru2

2018/07/10 05:23

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問