I had already opened a discussion on a similar issue, but I would like to find an alternative and therefore post here.
I have a list of posts within foreach, with lots of details, such as title, description, count of likes, list of comments etc. all thanks to the reports.
I would like clicking on each post to open a modal with exactly all the details of that post.
Can I do all this via the controller? To give a quick example of what I mean:
@marcolino922 Do you already have all the information available with the list of posts or do you query only the columns you need? If it's the former you don't need an extra request, if it's the latter (and you want to show the modal on the same page) you would have to do it asynchronous using Livewire or AJAX.
Yes, in my list I see all the details about each post, everything ok. I just wish that clicking on each post would open the post I am calling with all its details.
@marcolino922 Why do you want to make another request to the server then? Just open a modal when a post is clicked.
If I understood you correctly, then, make use of view()->render()
$post = Post:find($id);
$comments = $post->comments;
$likesCount = $post->likes()->count();
$html = view('modal_post', compact('post', 'comments', 'likesCount'))->render();
return $html;
And now when you will send an ajax request, all you have to do is to append the html you get from response to the body of the modal
Could you give me an example of the ajax code?
I created this controller
public function show_modal($id)
{
$item = Items::whereHas('category', function ($query) {
$query->where('status', 1);
})->where('id', $id)
->where('status', 1)
->firstOrFail();
$html = view('layouts.modal_item', compact('item'))->render();
return $html;
}
I know you are using jQuery, I'm not familiar with it, so I'll write some pseudo code
get(`${APP_URL}/view/${item_id}`)
.success((response) => {
$('#show--modal--post').modal('show'); // show modal
// replace modal content with html from response
$('#show--modal--post > div').html = response.data;
});
something like this
Create a route that accepts the ID and passes it to the controller
Get the model in the controller
Return a view with the data. The view does not need to be a full page, just the partial that you want to insert into the modal.
Replace the contents of the modal with the data sent in response to your request.
Route
Route::get('view/{id}', [HomeController::class, 'show_modal'])
->name('show_modal');
Controller
public function show_modal($id)
{
$item = Items::whereHas('category', function ($query) {
$query->where('status', 1);
})->where('id', $id)
->where('status', 1)
->firstOrFail();
return view('layouts.modal_item', compact('item'));
}
View
<div class="modal modal-blur fade" id="show--modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
{{ $item->title }}
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h3>{{ $item->story }}</h3>
</div>
</div>
</div>
</div>
I've tried them all, but it's not enough for me to just pass those textual parameters like:
$('#title').html(data.title);
Because I need to get also comment counts, likes, the list of comments ... which I get through relations like $item->comments->count() ...
Please or to participate in this conversation.