How to open a route to a modal window in Laravel

Question

How can I open in the modal window the information of the subject code coming from the other table?

In my controller I have this

public function viewSubjects($subject){
        if(Auth::guard('front')->check()){
            $user = Auth::guard('front')->user()->username;
        }else{
            $user = 0;
        }
        $student = Student::where('stud_no', $user)->first();
        $student = json_decode(json_encode($student));
              $subjects = Subject::where('subj_code', $subject)->get();
        return view('front.users.viewmySubjects')->with(compact('student','subjects','subject'));
    }

I have this blade

  <table class="table table-hover">
                            <thead>
                                <tr style="color:#1a0dab;font-weight:BOLD">
                                <th scope="col">SUBJECT CODE</th>
                                <th scope="col">TIME</th>
                                <th scope="col">DAYS</th>
                                <th scope="col">ROOM</th>
                                <th scope="col">INSTRUCTOR</th>
                                
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($grades as $grade)
                                <tr>
                                <td style="text-align: left;"><a href="{{ url('/mysubjects/'. $grade->subj_code)}}">{{ $grade->subj_code}}</td>
                  

                                <td>{{ $grade->time}} </td>
                                <td style="font-weight:bold;">{{ $grade->days}} </td>
                                <td>{{ $grade->room}} </td>
                                <td style="color:#ff0000;">{{ $grade->inst_name}}</td>
                                </tr>
                                @endforeach

                                
                            </tbody>
            </table>

I can open it on other blade

              <table class="table ">
                            <thead>
                                <tr >
                                <th scope="col" style="color:#1a0dab;">SUBJECT CODE</th>
                                <th scope="col" style="color:#1a0dab"> DESCRIPTION</th>
                                <th scope="col" style="color:#1a0dab">UNITS</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($subjects as $subject)
                                <tr>
                                 <td style="text-align: left;">{{ $subject->subj_code}}</td>
                                <td>{{ $subject->subj_desc}} </td>
                                <td>{{ $subject->subj_units}} </td>
                              
                                </tr>
                                @endforeach
                            </tbody>
                </table>

but then I would like to see it on Modal Window so that whenever I click subject code it will open the Modal Window and would see the info.

I have this route below.

Route::get('/mysubjects/{subject}', 'UsersController@viewSubjects');

This is what I've done so far, I'm totally mess..

  <table class="table table-hover">
                            <thead>
                                <tr style="color:#1a0dab;font-weight:BOLD">
                                <th scope="col">SUBJECT CODE</th>
                                <th scope="col">TIME</th>
                                <th scope="col">DAYS</th>
                                <th scope="col">ROOM</th>
                                <th scope="col">INSTRUCTOR</th>
                                
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($grades as $grade)
                                <tr>
                                <td style="text-align: left;"><a href="#myModal{{ url('/mysubjects/'. $grade->subj_code)}}"  data-toggle="modal">{{ $grade->subj_code}}</td>
                  
                                <!-- Modal -->
                                          <div class="modal fade" id="myModal{{ url('/mysubjects/'. $grade->subj_code)}}" 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">Modal title</h5>
                                                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                  </button>
                                                </div>
                                                <div class="modal-body">
                                                  
                                                    
                                                <table class="table ">
                                                              <thead>
                                                                  <tr >
                                                                  <th scope="col" style="color:#1a0dab;">SUBJECT CODE</th>
                                                                  <th scope="col" style="color:#1a0dab"> DESCRIPTION</th>
                                                                  <th scope="col" style="color:#1a0dab">UNITS</th>
                                                                  </tr>
                                                              </thead>
                                                              <tbody>
                                                              @foreach($subjects as $subject)
                                                                  <tr>
                                                                  <td style="text-align: left;">{{ $subject->subj_code}}</td>
                                                                  <td>{{ $subject->subj_desc}} </td>
                                                                  <td>{{ $subject->subj_units}} </td>
                                                                
                                                                  </tr>
                                                                  @endforeach
                                                              </tbody>
                                                  </table>

                                                </div>
                                                <div class="modal-footer">
                                                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                  <button type="button" class="btn btn-primary">Save changes</button>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                <td>{{ $grade->time}} </td>
                                <td style="font-weight:bold;">{{ $grade->days}} </td>
                                <td>{{ $grade->room}} </td>
                                <td style="color:#ff0000;">{{ $grade->inst_name}}</td>
                                </tr>
                                @endforeach

                                
                            </tbody>
            </table>

Can I use javascript/ ajax for this one? Thank you..

Answer 1

So I think the easiest solution is to make a blade component:

php artisan make:component AjaxModal

Your component ajax-modal.blade.php can look something like:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#{{$id}}">
    {{$slot}}
</button>

<!-- Modal -->
<div class="modal fade" id="{{$id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" id="{{$id}}-content">

        </div>
    </div>
</div>

<script>
    $(function () {
       $('#{{$id}}').on('show.bs.modal', function () {
           $('#{{$id}}-content').addClass('loading');
            $.ajax({
                url: @json($url),
                success: function (data) {
                    $('#{{$id}}-content').append($(data));
                },
                error: function () {
                    $('#{{$id}}-content').append($('<p>Error</p>'));
                },
                complete: function () {
                    $('#{{$id}}-content').removeClass('loading');
                }
            });
       });
    });
</script>

And your component class would be:

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class AjaxModal extends Component
{
    public string $id;
    public string $url;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($url, $id)
    {
        $this->id = $id;
        $this->url = $url;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|string
     */
    public function render()
    {
        return view('components.ajax-modal');
    }
}

Your main view can then be something like:

@foreach($grades as $grade)
   <tr>
      <td style="text-align: left;">
          @php 
             $modalUrl = url('/mysubjects/'. $grade->subj_code);
             $id = 'grade-'.$grade->id;
          @endphp
          <x-ajax-modal :url="$modalUrl" :id="$id"> 
             {{ $grade->subj_code}}
          </x-ajax-modal>
       </td>
   </tr>
@endforeach
                  

Keep in mind that whatever you return from your controller for the grade will be placed in the modal-content so the result should have the modal-header and modal-body included in it.

Also replace "myModalLabel" with an id that you will return in your result and will contain what screen readers are meant to read from for the modal

Edit:

For Laravel versions before 7 components are declared by just creating a single .blade.php file (in this case it would be the same as described above).

However the way to use them is:

@php 
$parameters = [ 
    'url' => url('/mysubjects/'. $grade->subj_code),
    'id' => 'grade-'.$grade->id 
];
@endphp
@component('ajax-modal', $parameters)
    Trigger
@endcomponent

Unfortunately previous versions of laravel do not support the backing class for the component or the simpler syntax. However in this particular use case the component class was not really doing anything anyway so it's something that you can probably live without.