Модалка в цикле это нормально?

Question

[lev89]

Как вызвать модалку при клике на кнопку "Ответить" под отзывом клиента? Например, у меня на сайте есть список отзывов, где для каждого отзыва можно оставить комментарий, вызвав модальное окно. Для кнопки вызова модального окна задаю id, в котором передаю id отзыва. Но, чтобы вызвать модальное окно именно для этого отзыва, мне приходится в цикле перебирать все модалки, чтобы пользователь мог оставить комментарий именно для данного отзыва. Как сделать, чтобы была единая модалка, в котором возможно добавить комментарий для определенного отзыва?

@foreach($reviews as $review)
<li>
    <h6 class="comment-name">{{ $review->user->name }}</h6>
    <div class="content">
		<p>{{ $review->content }}</p>
		<div class="comment-content-right">
			<a href="#" data-toggle="modal" data-target="#modal-review-{{ $review->id }}">Ответить</a>
		</div>
    </div>
</li>
@endforeach

@foreach( $reviews as $review)
<div  id="modal-review-{{ $review->id }}">
	<form>
		<div class="modal-body">
			<textarea name="content"></textarea>
		</div>
	</form>
</div>
@endforeach

Answer 1

[Сергей delphinpro]

Нет, это не нормально.
Достаточно одной формы ответа.

@foreach($reviews as $review)
<li>
    <h6 class="comment-name">{{ $review->user->name }}</h6>
    <div class="content">
    <p>{{ $review->content }}</p>
    <div class="comment-content-right">
      <a href="#" onclick="openReplyModal({{ $review->id }})">Ответить</a>
    </div>
    </div>
</li>
@endforeach

<div id="modal-reply">
  <form>
    <input type="hidden" name="review_id" id="review-id-field">
    <div class="modal-body">
      <textarea name="content"></textarea>
    </div>
  </form>
</div>

function openReplyModal(reviewId) {
  document.getElementById('review-id-field').value = reviewId;
  
  // Bootstrap 4
  $('#modal-reply').modal('show');

  // Bootstrap 5
  const modal = new bootstrap.Modal(document.getElementById('modal-reply'), {});
  modal.show();
}

Comments

[lev89]

класс! Спасибо Вам

Answer 2

[Adamos]

Не городить кучу ненужного HTML-я, а JS-ом создавать новое окошко с нужным контентом.
Кстати, к этому не имеет прямого отношения ни один из указанных в вопросе тегов.

Comments

[lev89]

минимизировал разметку, теги изменил

[Adamos]

lev89, да не в разметке дело, а в том, что в страницу без всякой нужды валится куча однотипных окон, когда реально нужно только одно, да и то - после нажатия кнопки. Подумайте, чем они отличаются - и вносите эти отличия скриптом после того самого нажатия кнопки, обходясь одним окошком.