Q&A
layouts.appのbladeファイルも記載いただけますでしょうか？
modalが表示されないということなので、Laravelというよりhtmlとjavascriptの問題であるように思えます。
bootstrapっぽい記述に思えますが、コードが無いのでフレームワークのバージョンなども不明です。
### 実現したいこと
削除ボタンを機能させたい。
ここに質問の内容を詳しく書いてください。
categoryページの削除ボタンが機能しなく困っています。route、controll,
viewなど何度も確認しました。考えられる原因がわかる方がいたら教えていただけたら幸いです
発生している問題・エラーメッセージ
エラーは出ていなく、削除ボタンをおしてもモーダルが表示されない現状です。
該当のソースコード
``
(web.php) <?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\CategoryController; use App\Http\Controllers\ProductController; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/', function () { return view('welcome'); }); Auth::routes(); Route::resource('category', CategoryController::class); Route::resource('product', productController::class); Route::get('/', [App\Http\Controllers\ProductController::class, 'producttop']); //Route::get('/', 'ProductController@productTop'); Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
`(categorycontroller) <?php namespace App\Http\Controllers; use App\Models\Category; use App\Models\Product; use Illuminate\Http\Request; class CategoryController extends Controller { /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function index() { // $categories = Category::latest()->get(); // dd($categories); return view('category.index', ['categories' => $categories]); } /** * Show the form for creating a new resource. * * @return \Illuminate\Http\Response */ public function create() { // return view('category.create'); } /** * Store a newly created resource in storage. * * @param \Illuminate\Http\Request $request * @return \Illuminate\Http\Response */ public function store(Request $request) { // request()->validate( ['name' => 'required|unique:categories'], ['name.required' => 'カテゴリーを入力してください。', 'name.unique' => 'そのカテゴリーは既に追加されています。'] ); Category::create([ 'name' =>request('name') ]); return redirect()->back()->with('message', 'カテゴリーが追加されました。'); } /** * Display the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function show($id) { // } /** * Show the form for editing the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function edit($id) { // $category = Category::find($id); return view('category.edit',['category' => $category]); } /** * Update the specified resource in storage. * * @param \Illuminate\Http\Request $request * @param int $id * @return \Illuminate\Http\Response */ public function update(Request $request, $id) { // request()->validate( ['name' => 'required|unique:categories'], ['name.required' => 'カテゴリーを入力してください。', 'name.unique' => 'そのカテゴリーは既に追加されています。'] ); $category = Category::find($id); $category->name = request('name'); $category->save(); return redirect('/category')->with('message', 'カテゴリーが編集されました。'); } /** * Remove the specified resource from storage. * * @param int $id * @return \Illuminate\Http\Response */ public function destroy($id) { $category = Category::find($id); $category->delete(); return redirect('/category')->with('message', 'カテゴリーが削除されました。'); } }
``
(index.blade.php) @extends('layouts.app') @section('content') <div class="container" style="max-width: 720px;"> <div class="text-right"> <a href="{{ url('/product/create') }}">＜戻る＞</a> </div> @if (session('message')) <div class="alert alert-success" role="alert">{{ session('message') }}</div> @endif <table class="table table-bordered mt-2"> <thead class="table-dark"> <tr> <th scope="col"> # </th> <th scope="col"> 作成日 </th> <th scope="col"> カテゴリー </th> <th scope="col"> 編集 </th> <th scope="col"> 削除 </th> </tr> </thead> <tbody> @if (count($categories) > 0) @foreach ($categories as $key => $category) <tr> <th scope="row"> {{ $key + 1 }} </th> <td> {{ $category->created_at->format('Y/m/d') }} </td> <td> {{ $category->name }} </td> <td> <a href="{{ route('category.edit', ['category' => $category->id]) }}"> <button type="button" class="btn btn-outline-danger"> <i class="far fa-edit"></i>編集 </button> </a> </td> <td> <!-- <button type="button" class="btn btn-outline-primary"><i class="far fa-trash-alt"></i> 削除</button> --> //コメントアウト <!-- Button trigger modal --> <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#exampleModal{{$category->id}}"><i class="far fa-trash-alt"></i> 削除</button> //変更 <!-- Modal --> <div class="modal fade" id="exampleModal{{$category->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> //変更 <div class="modal-dialog" role="document"> <form action="{{ route('category.destroy', [ 'category' => $category->id ]) }}" method="POST"> //追加 @csrf //追加 @method('DELETE') //追加 <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">カテゴリー削除</h5> //変更 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> 本当に削除しますか？ //変更 </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button> //変更 <button type="submit" class="btn btn-primary">削除</button> //変更 </div> </div> </form> </div> </div> </td> </tr> @endforeach @else <tr> <td colspan="5">追加されたカテゴリーはありません。</td> </tr> @endif </tbody> </table> <div class="my-4"> <a href="{{ url('/category/create') }}">カテゴリー新規追加ページへ</a> </div> </div> @endsection
ご連絡ありがとうございます。私もjavascriptに問題があると考えていていま解決策を探しています。
文字制限で記載できなかったのでこちらに載せました。このlayouts.appに何か問題点がありますでしょうか？よろしくお願いします。
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
<script src="https://kit.fontawesome.com/2e4b86039b.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/product') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav me-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ms-auto">
<!-- Authentication Links -->
@guest
@if (Route::has('login'))
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@endif
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4 mb-5">
@yield('content')
</main>
</div>
</body>
</html>
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
Viteでコンパイルしていると思われますので、これだけだと何も分かりません。
Bootstrapを利用されていますか？もしその場合、バージョンはいくつでしょうか。
"bootstrap": "^5.2.3",こちらがbootstrapのバージョンになります。もしかしたらバージョンが違うと
適応されないのでしょうか？教材を見て作成してるのですが、教材には "bootstrap": "^4.0.0", // Bootstrapが追加されています。と記されています。よろしくお願いします。
回答2件
0
ベストアンサー
質問へのコメント欄で頂いたところによるとBootstrap5系を利用しているとのことですが、記述方法が異なります。
bootstrapの全てのdata-*属性は data-bs-*とする必要があります。
buttonタグの data-toggleをdata-bs-toggle に、data-targetをdata-bs-target に変更してみてください。
メジャーバージョンアップの場合多数の変更があるため、互換性の無い変更点は一通り目を通して対応する必要がでてきます。
公式サイトの Breaking と記載されている部分を確認されると良いかと思います。
バージョンが古くなりますが、日本語訳ページもあります。
https://getbootstrap.jp/docs/5.0/migration/
投稿2023/07/17 06:34
総合スコア3297
0
エラーは出ていなく、削除ボタンをおしてもモーダルが表示されない現状です。
削除ボタンを押したときのコードは、モーダルが表示されるというコードとなってるでしょうか。
そこらへんから検証してみましょう
投稿2023/07/16 12:34
総合スコア88180
あなたの回答
tips
プレビュー
