How can I pass a parameter to modal on laravel 5.3?
My opinion is this:
<table class="table table-bordered">
...
<tr>
@for($i = 0; $i < 5; $i++)
<td id="image-view-li-{{$i}}" style="display: none" data-toggle="modal" data-target="#modal-option">
<img id="image-view-{{$i}}" src="https://myshop.co.id/img/shop1.jpg" alt="">
</td>
@section('modal')
@include('components.modal.option',['i'=>$i])
@endsection
@endfor
</tr>
...
</table>
When I click the td button it is called by the modal
My modal looks like this:
<div id="modal-option" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<a href="javascript:" id="image-edit-{{$i}}">
<span class="fa fa-pencil"></span>
</a>
</div>
<div class="form-group">
<a href="javascript:" class="text-danger" id="image-delete-{{$i}}">
<span class="fa fa-trash"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
I want to pass a parameter $i
to modal
For example I press td which has $ i = 3. Then it will pass the parameter $ i = 3 to the modal
I tried it like my code above
But, the $ id sent is always 0
How can I solve this problem?
Update
I found a solution
@for($i = 0; $i < 5; $i++)
<td id="image-view-li-{{$i}}" style="display: none" data-toggle="modal" data-target="#modal-option-{{$i}}">
<img id="image-view-{{$i}}" src="https://myshop.co.id/img/shop1.jpg" alt="">
</td>
@include('components.modal.option',['i'=>$i])
@endfor
<div id="modal-option-{{$i}}" class="modal" tabindex="-1" role="dialog">
...
</div>
Works
source to share
I am assuming you are loading modal javascript or jquery when you click on the td. Now, what do you think javascript will pick up the variable that was generated by PHP. You need to add an attribute on the td that contains the id and add logic in javascript so that when the td button is clicked, it will select the value of the attribute carrying the id. I hope you understand the concept
source to share
Why should you wrap a modal modal section? Perhaps you need this solution?
<table class="table table-bordered">
...
<tr>
@for($i = 0; $i < 5; $i++)
<td id="image-view-li-{{$i}}" style="display: none" data-toggle="modal" data-target="#modal-option">
<img id="image-view-{{$i}}" src="https://myshop.co.id/img/shop1.jpg" alt="">
@include('components.modal.option',['i'=>$i])
</td>
@endfor
</tr>
...
</table>
source to share