mix('js/counseling_tab.js')とcounseling_tabs.jsはどちらが正しいのでしょうか？
前提・実現したいこと
Laravel(ver8.42.1)で生徒管理システムを作っています。
カウンセリングボタンを押下したらcounseling.blade.phpと、counseling_tabs.blade.phpの内容を表示されるようにしたいです。 現在、counseling.blade.phpは表示されています。
発生している問題・エラーメッセージ
counselings.blade.phpは表示されるが、counseling_tabs.blade.phpのタブ表示がうまくいってない
エラーメッセージ
VM17:4068 Uncaught TypeError: $(...).button is not a function at HTMLDocument.<anonymous> (<anonymous>:10931:30) at mightThrow (<anonymous>:3775:29) at process (<anonymous>:3843:12)
該当のソースコード
jquery
**counseling_tabs.js** $(function() { $("a, button", ".toolbar").button(); $("#tabs").tabs(); var tabCount = 1; var tabNavTmpl2 = "<li id='add{0}'><a href=\{{ url('counseling_tabs')}}\">提案 {2}</a></li>"; $("#load").on('click',function () { ++tabCount; //tabNavTmpl2の{0}をtabCountに置換する var tabNav = tabNavTmpl2.replace("{0}", tabCount).replace("{1}", tabCount).replace("{2}", tabCount); $("#tabs").find("#loadA").before(tabNav); $("#tabs").tabs("refresh"); return false; }); });
jquery
**counseling.js** $(function(){ $('#counseling').hide(); $(".counseling").on('click',function(){ $('#counseling').toggle(); $("#counseling").load("/counselings"); }) })
**counselings.blade.php** <section class="counseling-section"> <div class="counseling-wrap"> <table class="counseling-table"> <tr> <td>リテラシーレベル</td> <td><input type="text" style="width: 43rem;"></td> </tr> <tr> <td>カウンセリング結果</td> <td><textarea name="" id="" cols="100" rows="10"></textarea></td> </tr> <tr> <td>意思決定予定日</td> <td><input type="date"></td> </tr> </table> <div id="tabs"> <ul> <li><a href="{{ url('counseling_tabs') }}">提案</a></li> <li id="loadA"> <button id="load">追加</button> </li> </ul> </div> <div class="button-list"> <ul class="button-list-item"> <li><button class="save">保存</button></li> <li><button class="print" type="button">印刷</button></li> </ul> </div> </div> </section> <script src="{{ mix('js/counseling_tab.js') }}"></script>
php
**counselings_tabs.blade.php** <section class="suggestion-section"> <table class="suggestion-table"> <tr> <td>提案タイトル</td> <td><input type="text"></td> </tr> <tr> <td>目標</td> <td><input type="text"></td> </tr> <tr> <td>提案概要</td> <td><input type="text"></td> </tr> <tr> <td>提案時間数</td> <td><input type="text"></td> <td><input type="text" style="width: 5rem;"> 時間</td> <td>×週 <input type="text" style="width: 3rem;"> 回</td> </tr> <tr> <td>提案受講料</td> <td><input type="text"></td> <td><input type="text" style="width: 5rem;"> ポイント</td> <td>月謝<input type="checkbox">入学金免除<input type="checkbox"></td> <td><input type="text" style="width: 5rem;"> %割引適用</td> </tr> </table> </section> <section class="curriculum-section"> <div class="curriculum-wrap"> <div class="curriculum-wrap__word">カリキュラム</div> <table class="curriculum-table"> <tr> <th>単元</th> <th>時間</th> <th>学習内容</th> </tr> <tr> <td><input type="text"></td> <td><input type="text" style="width: 5rem;"></td> <td><input type="text" style="width: 25rem;"></td> </tr> <tr> <td><input type="text"></td> <td><input type="text" style="width: 5rem;"></td> <td><input type="text" style="width: 25rem;"></td> </tr> </table> </div> </section>
**webpack.mic.js** const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .js('resources/js/counseling.js', 'public/js') .js('resources/js/counseling_tab.js', 'public/js') .js('resources/js/follow.js', 'public/js') .js('resources/js/jquery-ui.js', 'public/js') .js('resources/js/jquery-ui.min.js', 'public/js') .postCss('resources/css/app.css', 'public/css') .autoload({ "jquery": ['$', 'window.jQuery'], });
php
### inquirys.blade.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="{{ asset('css/reset.css') }}"> <link rel="stylesheet" href="{{ asset('css/header.css') }}"> <link rel="stylesheet" href="{{ asset('css/inquiry.css') }}"> <link rel="stylesheet" href="{{ asset('css/counseling.css') }}"> <link rel="stylesheet" href="{{ asset('css/counseling_tab.css') }}"> <link rel="stylesheet" href="{{ asset('css/follow.css') }}"> <link rel="stylesheet" href="{{ asset('css/app.css') }}"> </head> <body> <header> @include('layouts.headers') </header> <main> <form action="{{ url('inquirys') }}" method="POST"> @csrf <table class="inquirys-table"> <tr> <td>氏名</td> <td><input type="text" name="student_name"></td> <td><button class="admission-color">入学</button></td> </tr> <tr> <td>電話</td> <td><input type="text" name="student_tell"></td> </tr> <tr> <td>住所</td> <td colspan="2"><input type="text" name="student_address" style="width: 25rem;"></td> </tr> <tr> <td>メール</td> <td><input type="text" name="student_mail"></td> <td><button id="gmail" class="button-color">gmail</button></td> </tr> <tr> <td>職業</td> <td><input type="text" name="profession"></td> </tr> </table> <div class="button-list"> <ul class="button-list-item"> <li><button class="save">保存</button></li> <li><button class="counseling" type="button" formaction="{{ url('counselings') }}" formmethod="GET">カウンセリング</button></li> <li><button class="follow" type="button" formaction="{{ url('follows') }}" formmethod="GET">フォロー状況</button></li> </ul> </div> </form> <div id="counseling"></div> <div id="follow"></div> </main> <script src="{{ mix('js/app.js') }}"></script> <script src="{{ mix('js/counseling_tab.js') }}"></script> <script src="{{ mix('js/follow.js') }}"></script> <script src="{{ mix('js/counseling.js') }}"></script> <script src="{{ mix('js/jquery-ui.js') }}"></script> <script src="{{ mix('js/jquery-ui.min.js') }}"></script> </body> </html>
試したこと
1： $("a, button", ".toolbar").button();を削除
→ $("#tabs").tabs();でエラーが起きた
2：uiも使用しているため、
webpack.mic.jsにその情報を記載
3：Larabelではなく、普通のHtmlで試した際には作動している
補足情報（FW/ツールのバージョンなど）
Laravel:ver 8.42.1
php:ver8.0.3
お手すきの折にご教示いただけますと幸いです
また、Laravel初心者のため、お手柔らかにお願いいたします。
私のプログラムミスです。mix('js/counseling_tabs.js')
が正しいです。
ご指摘下さり誠にありがとうございます。
正常に動いていない方に
<script src="{{ mix('js/counseling_tab.js') }}"></script>
が入っていないのは関係ないでしょうか？
まだ回答がついていません
会員登録して回答してみよう
