Can't change title of modal using Laravel - php

Question

I've created a resource database using Laravel, and have the option to (flag, edit, and/or delete) a resource. When I hit the 'flag' button a modal pops up for you to add input as to why you're flagging the resource. I'd like for the title of the modal to show which resource was clicked, and I have it working, but in this instance I cannot change the title of the modal regardless of which resource I flag. Here's some of my code, hopefully it'll be more clear.
Resource View
#foreach($resources as $resource) #foreach ($resource->locations as $location)
<tr>
<td> <a class="btn btn-small btn-default" style="float:right; margin-right:5px;" href="{{ URL::to('resource/addToCart/' .$resource->Resource_ID) }}">+</a> {{ $resource->Name }}</td>
<td>{{ $resource->Description }}</td>
<td>{{ $location->Address }}</td>
<td>{{ $location->City }}</td>
<td>{{ $location->Zip_Code }}</td>
<td>{{ $location->County }}</td>
<td>
<button type="button" class=" msgBtn btn btn-default" style=" display:inline; margin-right:auto;">Edit
</button>
<button type="button" class=" msgBtn2 btn btn-default" id="flagged" data-toggle="modal" data-target="#flagResource" style="display:inline; margin-right:auto;">Flag
</button>
<button type="button" class=" msgBtn3 btn btn-default" style="display:inline; margin-right:auto;">Delete
</button>
</td>
</tr>
#endforeach
#endforeach
</tbody>
So, when the middle button is clicked, it brings up the modal which looks like this
Modal View
<div class="modal fade" id="flagResource"
tabindex="-1" role="dialog"
aria-labelledby="flagResourceLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title"
id="flagged" style="text-align:center;"> {{ $resource->Name }}
</h4>
</div>
<div class="modal-body">
{!! Form::open(['method' => 'POST', url('FlagsController#addFlag'), $resource->id ]) !!}
<div class="form-group">
{!! Form::label('reason', 'Reason for Flag: ') !!}
{!! Form::textarea('Reason', null, ['class' => 'form-control']) !!}
</div>
<div class="form-group">
{!! Form::label('comments', 'Other Comments: ') !!}
{!! Form::text('Comments', null, ['class' => 'form-control']) !!}
</div>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-default"
data-dismiss="modal">Close</button>
<span class="pull-right">
<button type="button" class="btn btn-primary" style="margin-left:5px;">
Submit
</button>
</span>
</div>
</div>
</div>
</div>
So whenever I click flag on ANY resource, It shows this:
modalExample
I can't figure out why it keeps showing up that as my title. Any help would be great, thanks!

Answer 1

The modal uses this data:
$resource->Name
$resource->id
You probably have the modal somewhere after your foreach in your code, so $resource is filled with data from the last row in this loop:
#foreach($resources as $resource) #foreach ($resource->locations as $location)
<td> <a class="btn btn-small btn-default" style="float:right; margin-right:5px;" href="{{ URL::to('resource/addToCart/' .$resource->Resource_ID) }}">+</a> {{ $resource->Name }}</td>
#endforeach
What you should do is send more data to the modal so it can show the correct information. So in your loop you should attach more data for every row.
I am assuming you are using bootstrap for the modal. In version 3.2.0 you can do something like this to add this data:
Flag
And use javascript to get the variables and set them in your modal instead of using $resource->Name.
$('#my_modal').on('show.bs.modal', function(e) {
var resourceId = $(e.relatedTarget).data('resource-id');
var resourceName = $(e.relatedTarget).data('resource-name');
$(e.currentTarget).find('#resourceId').val(resourceId);
$(e.currentTarget).find('#resourceName').val(resourceName);
});