How to retrieve the id from iteration to the bootstrap modal? - laravel

Question

I need to capture the id from the iteration, but it seems to capture the last id which it's seems to be obviously,
Am using bootstrap modal which i even don't know how they code their jQuerys'.
Thus how can i do to make this button not capturing the last id?
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#applications_{{$user->id}}" id="#applications_{{$user->id}}">View applications</button>
<!-- Modal -->
<div class="modal fade" id="applications_{{$user->id}}" role="dialog" >
<div class="modal-dialog" >
<!-- Modal content-->
<div class="modal-content" style="width: 600px !important;">
<div class="modal-header">
{{-- <button type="button" class="close" data-dismiss="modal">×</button> --}}
<h4 class="modal-title">Applications</h4>
</div>
<div class="modal-body">
<div class="text-muted" style="float: left;padding-right: 10px">
<table class="table table-hover">
<tr>
<th>Company name</th>
<th>Location</th>
<th>Program</th>
<th>Application</th>
<th>Actions</th>
</tr>
#foreach($user->post as $form)
<tr>
<td>{{$form->pivot->company_name}}</td>
<td></td>
<td>{{$form->pivot->id}}</td>
<td>
/* this button is only capturing the last id from iteration */
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#application_{{$form->pivot->id}}" >View {{$form->pivot->file}}</button> </td>
<td></td>
</tr>
#endforeach
{{$user->name}}
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="application_{{$form->pivot->id}}" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Application</h4>
</div>
<div class="modal-body">
<div class="text-muted" style="float: left;padding-right: 10px">
<div class="center image">
<img src="/storage/file/{{$form->pivot->file}}" class="img-round" alt="User Image">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Expected to retrieve an image from it's respectively post, but it only works with the last id, no errors.

Answer 1

Your second modal is outside the foreach, then id="application_{{$form->pivot->id}}" only works with the last value it took in the loop. To do it with a blade, you can redo the loop and create a modal for each id and image:
<!-- 2nd Modal -->
#foreach($user->post as $form)
<div class="modal fade" id="application_{{$form->pivot->id}}" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Application</h4>
</div>
<div class="modal-body">
<div class="text-muted" style="float: left;padding-right: 10px">
<div class="center image">
<img src="/storage/file/{{$form->pivot->file}}" class="img-round" alt="User Image">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endforeach