Different output inside modal (Laravel 5.4)

Question

I have this code in my trips.blade.php. The problem is when my $t->employees is outside the modal, I retrieve all my employees but when I put my $t->employees inside my modal, I can only retrieve 1 Data. I can't figure out any error in this scenario.

@foreach($trips as $t)
<tr> 
    <td>{{$t->id}}</td> 
    <td>{{$t->dateMilled_trip}}</td>
    <td>{{$t->ticket->ticketNumber_ticket}}</td>	
    <td>{{$t->truckNumber_trip}}</td>
    <td>{{$t->finalWeight_trip}}</td>
    <td>


    {{$t->employees}} -> Here it shows all the employees inside trip



        <a class="btn btn-info btn-xs" data-toggle="modal" data-target="#viewEmployeesAttendanceTicket">View Employees Attendance</a>
        <!-- Modal -->
        <div class="modal fade" id="viewEmployeesAttendanceTicket" tabindex="-1" role="dialog" aria-labelledby="James Order List">
            <div class="modal-dialog" role="document">
                <div class="modal-content">


                    {{$t->employees}} ->Here it show only 1 employee data




                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">{{$t->ticket->ticketNumber_ticket}} Attendances</h4>
                    </div>
                    <div class="modal-body">
                        <table class="table table-striped"> 
                            <thead> 
                                <tr> 
                                    <th>#</th> 
                                    <th>Employee Name</th>  
                                </tr>
                            </thead> 
                            <tbody>
                            @foreach($t->employees as $emp) ->same here [1 Data only]
                            <tr> 
                                <td>{{$emp->id}}</td> 
                                <td>{{$emp->name_employee}}</td> 
                            </tr> 
                            @endforeach 

                            </tbody> 
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>    
    </td> 
    <td>
        <div class="btn-group" role="group" aria-label="...">
            <a class="btn btn-danger btn-xs">DELETE</a>
        </div>
    </td> 
</tr>
@endforeach

Screenshot

Answer 1

short answer but not a best practice is to change these lines as below

 <a class="btn btn-info btn-xs" data-toggle="modal" data-target="#viewEmployeesAttendanceTicket_{{$t->id}}">View Employees Attendance</a>
        <!-- Modal -->
        <div class="modal fade" id="viewEmployeesAttendanceTicket_{{$t->id}}" tabindex="-1" role="dialog" aria-labelledby="James Order List">

you can try this out first if it works then lets discuss the issue.

I had that case before. what happens in your page is your making many rows and in each one you're creating modal with the id viewEmployeesAttendanceTicket so there's many modals all with the same id viewEmployeesAttendanceTicket and when trying to display any of them they will always display the same modal-the first I guess- so you've two approaches here. The first is to differentiate the modals as mentioned above but this solution is not very good if you've many rows as you'll have so many modals loaded with data.

the more sleek solution is to have one modal upgradable by jquery. if you need help with writing it leave me a comment