Level 102
I don't see you mention your js framework (if any). I have alot if modals in my apps, but I use react. So I just set the active item, and then open the modal (just one modal shared between all items)
Apr 14, 2022
5
Level 12
Looking for solutions for modal problems
Hey!
My website is storing reviews for other websites. These reviews can be reported by everyone. Currently I'm allowing this to happen through modals. Notice "modalS". I'm creating a modal through a foreach loop (on the reviews) for each review - this means that each review have a modal for report. The thing is it's a little buggy, because sometimes the script can't retrieve properly the ID of the review and It's annoying. You're clicking to report a review and it reports another one. So... Do you guys have any great idea how to implement these reports inside a modal or something similar to modal so I can avoid these ID mistakes? Moving the report script of a review to another page is not an option as it must be dynamically (AJAX based). I'm waiting for your suggestions. Thanks in advance!
Level 12
@Sinnbeck Sorry, my bad. I'm using bootstrap 5.
Level 102
@Laralex ok haven't used that in years. But show how you are setting the content of your modal, and perhaps we can spot the problem
Level 12
@Sinnbeck Controller
$reviews = $website->reviews()->..........->get();
Blade file (before body & scripts tags)
@auth
@foreach($reviews as $modalRev)
<div class="modal fade" id="reportModal{{ $modalRev->id }}" tabindex="-1" aria-labelledby="reportModalLabel{{ $modalRev->id }}" aria-hidden="true">
// ....................
</div>
@endforeach
@endauth
Blade file (where reviews appear - it's the same file where modals are stored) - I show a button that triggers the opening of modal and inside the modal the user continues with the report of a review.
@foreach($reviews as $review)
@auth
<a href="javascript:void(0);" class="ReportReview" data-id="{{ $review->id }}" data-toggle="tooltip" title="@lang('main.reviews_report_this_review')" data-bs-toggle="modal" data-bs-target="#reportModal{{ $review->id }}"><i class="icon-flag text-danger"></i></a></li>
@endauth
@endforeach
Level 12
Is there a way on button click to insert in the DOM a modal and pass the ID of the review to the modal somehow? So there (in the modal) will be a form that will send a report for the passed review id. But if the modal is closed it must be removed from the DOM. I need something really simple, but dynamically.
What appear in my head is on button click start an AJAX call (passing the ID) to a blade file with a modal structure which will be inserted in the DOM. Will that work?
Please or to participate in this conversation.