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

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

新規登録して質問してみよう
ただいま回答率
87.20%
jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。

解決済

Laravel にJqueryで作成したタブのロジックを画面に反映させたいです。

sirokuma_sodium
sirokuma_sodium

総合スコア1

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。

1回答

0評価

0クリップ

656閲覧

投稿2021/07/31 13:51

前提・実現したいこと

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;">&emsp;時間</td> <td>×週&emsp;<input type="text" style="width: 3rem;">&emsp;</td> </tr> <tr> <td>提案受講料</td> <td><input type="text"></td> <td><input type="text" style="width: 5rem;">&emsp;ポイント</td> <td>月謝<input type="checkbox">入学金免除<input type="checkbox"></td> <td><input type="text" style="width: 5rem;">&emsp;%割引適用</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初心者のため、お手柔らかにお願いいたします。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

FKM

2021/08/03 03:00

mix('js/counseling_tab.js')とcounseling_tabs.jsはどちらが正しいのでしょうか?
sirokuma_sodium

2021/08/03 11:32

私のプログラムミスです。mix('js/counseling_tabs.js') が正しいです。 ご指摘下さり誠にありがとうございます。
FKM

2021/08/04 06:49

正常に動いていない方に <script src="{{ mix('js/counseling_tab.js') }}"></script> が入っていないのは関係ないでしょうか?

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。