I have a foreach()
from database table, I want to show a popup/model to show its extra information.
I am showing just title and description and on click i want to open up a popup and show its extra information.
@foreach($myProjects as $project)
<div class="col-sm-4 col-md-4 notes notes--blue">
<a href="#edit-note" data-toggle="modal" style="background-color: #f9f9f9;border-bottom: 5px solid #42A5F5">
<div class="notes__title">{{$project->title}}</div>
<div class="notes__body">{{$project->description}}</div>
</a>
<div class="notes__actions" data-demo-action="delete-listing">
<i class="zmdi zmdi-delete"></i>
</div>
<div class="notes__actions1" data-demo-action="delete-listing">
<i class="zmdi zmdi-edit"></i>
</div>
<div class="notes__actions2" data-demo-action="delete-listing">
<i class="zmdi zmdi-eye"></i>
</div>
</div>
@endforeach
I am completely blank, Should i fetch post id to a hidden html tag and on model button click an ajax call will fetch the record info based on the id
?
I would add a data-id
attribute to one of the elements, possibly the wrapper, then add something like
$(document.body).on('click', '.clickable_element', function(e){
if ($(this).data('id')) {
$.ajax({
url : 'your detail url',
data: { id: parseInt( $(this).data('id'), 10 ),
success : function(response){
// open popup and add response into it.
}
})
}
});
UpdateI just noticed you already have bootstrap modal there.
you can add your data-id to data-toggle
element then in javascript
$('[data-toggle=modal]').on('shown.bs.modal' , function(){
// do your ajax stuff
// add response in `.modal-body`
})