Quick edit db rows using bootstrap model in laravel - php

Question

I have created a view that shows all images used in Carousel. This is my method in controller
My edit method:
public function edit($id)
{
$carousel = Carousel::find($id)->first();
return view('admin.partials._edit-modal.blade');
}
My route for edit:
Route::get('carousel.edit/{id}',['as' => 'carousel.edit', 'uses' => 'LinkController#edit']);
This is my code to display it in view:
#foreach($carousels as $carousel)
<div class="col-xs-6 col-md-3 grid">
<a href="{{ url($carousel->path) }}" class="thumbnail" data-lity>
<img class="img-responsive" src="{{ $carousel->path }}" alt="">
</a>
</div>
#endforeach
I've set up a button to open a model that shows the selected image and form to edit the image name [ Form not setup yet, shows only image].
My model code:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<img class="img-responsive" src="{{ $carousel->path }}" alt="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
There is no error in code but when the edit button is clicked it is always showing the last image of the table. Whether I click edit button of first,second or any image. The model always shows the last image.

Answer 1

When showing the images with a foreach() loop you should include the button to edit that image including the id of the image and pass this id to the modal. Something like this:
<button type="button" class="edit-image" data-toggle="modal" data-target="#myEditImageModal" data_value="{{ $image->id }}"> Edit</button>
Then add a script to pass that specific id when the button is clicked to the modal. You can accomplish this with js:
<script>
// pass image id to modal
$('.edit-image').click(function() {
$("#image_id").val($(this).attr('data_value'));
});
</script>
Finally the modal will receive that id and you can store it in a hidden input field inside your form. Something like this:
<div id="myEditImageModal" tabindex="-1" role="dialog" class="modal fade">
...
<form>
...
<input type="hidden" name="image_id" id="image_id">
...
</form>
...
</div>
Place the modal outside the foreach loop.