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">×</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
回答2件
あなたの回答
tips
プレビュー