Randy_Johnson's avatar

Bootstrap Modal Help - route link not working

@extends('layouts.dashboard')

@section('title', 'English Learning')

@section('content')    

<!-- Area Chart -->
<div class="col-xl-12 col-lg-12">
    <div class="card shadow mb-4">
    <!-- Card Header - Dropdown -->
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">Users</h6>
        <div class="dropdown no-arrow">
        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
        </a>
        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
            <div class="dropdown-header">Database Actions:</div>
            <a class="dropdown-item" href="#">Drop</a>
            <a class="dropdown-item" href="#">Truncate</a>
        </div>
        </div>
            </div>
            <!-- Card Body -->
            <div class="card-body">
                <table class="table">
                    <thead>
                        <tr>
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Create at</th>
                        <th scope="col"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($data as $datum)
                            <tr>
                            <th scope="row">{{$datum->id}}</th>
                            <td>{{$datum->name}}</td>
                            <td>{{$datum->email}}</td>
                            <td>{{$datum->created_at}}</td>
                            <td>
                                <div class="text-right"> 
                                    <a class="btn btn-warning" href="#" data-toggle="modal" data-target="#updateModal"">Update</a>
                                    <button class="btn btn-danger" data-toggle="confirmation" href="{{route('user.destroy', $datum->id)}}">Delete</button>
                                </div>
                            </td>
                            </tr>

                            <!-- Logout Modal-->
                            <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Update</h5>
                                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                    </div>
                                    <div class="modal-body">Update something blah .</div>
                                    <div class="modal-footer">
                                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                                    <button class="btn btn-primary" href="#" data-toggle="modal" data-target="#updateModal" href="{{ route('welcome') }}">
                                        Update
                                    </button>
                                    </div>
                                </div>
                                </div>
                            </div>




                        @endforeach
                    </tbody>
                </table>
        </div>
    </div>
</div>

@endsection
0 likes
3 replies
Nakov's avatar

You cannot have href attribute on a button that's an anchor attribute ie <a>

So you need to have:

<a href="{{ route('welcome') }}">Welcome</a>
Randy_Johnson's avatar

I will need it to be a form to send data, I just change to a form and put in a button type button, with the form using a route, but when clicking the button, nothing happens.


@extends('layouts.dashboard')

@section('title', 'English Learning')

@section('content')    

<!-- Area Chart -->
<div class="col-xl-12 col-lg-12">
    <div class="card shadow mb-4">
    <!-- Card Header - Dropdown -->
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">Users</h6>
        <div class="dropdown no-arrow">
        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
        </a>
        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
            <div class="dropdown-header">Database Actions:</div>
            <a class="dropdown-item" href="#">Drop</a>
            <a class="dropdown-item" href="#">Truncate</a>
        </div>
        </div>
            </div>
            <!-- Card Body -->
            <div class="card-body">
                <table class="table">
                    <thead>
                        <tr>
                        <th scope="col">#</th>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Create at</th>
                        <th scope="col"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($data as $datum)
                            <tr>
                            <th scope="row">{{$datum->id}}</th>
                            <td>{{$datum->name}}</td>
                            <td>{{$datum->email}}</td>
                            <td>{{$datum->created_at}}</td>
                            <td>
                                <div class="text-right"> 
                                    <a class="btn btn-warning" href="#" data-toggle="modal" data-target="#updateModal"">Update</a>
                                    <button class="btn btn-danger" data-toggle="confirmation" href="{{route('user.destroy', $datum->id)}}">Delete</button>
                                </div>
                            </td>
                            </tr>

                            <!-- Logout Modal-->
                            <form action="{{ route('user.update', $datum->id), $datum->id }}"></form>
                                <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Update</h5>
                                        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                        </div>
                                        <div class="modal-body">Update something blah .</div>
                                        <div class="modal-footer">
                                        <a class="btn btn-secondary" data-dismiss="modal">Cancel</a>
                                        <button type="submit" class="btn btn-primary">
                                            Update
                                        </a>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </form>




                        @endforeach
                    </tbody>
                </table>
        </div>
    </div>
</div>

@endsection
Nakov's avatar
Nakov
Best Answer
Level 73

@randy_johnson you need to close the form once, and only below the submit button, you have this: </form> immediately after you open the form, so remove that.

  • You are missing, method="post" and @csrf and @method('PATCH') or however you defined your route.

Please or to participate in this conversation.