Щелчок по строке таблицы возвращает неверные данные

Спасибо, что нашли время изучить мою проблему.

У меня есть представление, возвращающее данные из моей базы данных, передавая их через контроллер:

public function index()
    {
        $members = Member::orderBy('id', 'desc')->paginate(5);

        return view('home', compact('members'));
    }

Я доволен видом: введите описание изображения здесь

Я передаю его представлению с помощью цикла foreach:

 @foreach ($members as $member)

 @include('partials.tableRow')

 @endforeach

Мой tableRow выглядит так:

<a class="panel-block" onclick="refs.show.open()">
  <span class="panel-icon">
    <i class="fas fa-user" aria-hidden="true"></i>
  </span>
  <span class="column is-4">
    {{ $member->name }}
  </span>
  <span class="panel-icon">
    <i class="fas fa-at" aria-hidden="true"></i>
  </span>
  <span class="column is-5">
    {{ $member->email }}
  </span>
  <span class="panel-icon">
    <i class="fas fa-tshirt" aria-hidden="true"></i>
  </span>
  <span class="panel-button column is-1">
    {{ $member->size }}
  </span>
  <span class="panel-icon">
    <i class="fas fa-coins" aria-hidden="true"></i>
  </span>
  <span class="panel-button column is-2">
    {{ $member->points}}
  </span>
</a>

Проблема возникает, когда я нажимаю на отдельную строку таблицы. Я хочу, чтобы он отображал данные, связанные с информацией, в отдельной строке таблицы. На картинке ниже я щелкнул первую строку (мое собственное имя), и появляется следующее: неправильное отображение данных

Как видите, он показывает информацию из последней строки и делает это каждый раз, когда я щелкаю строку. Та же проблема, когда я иду дальше по страницам.

Я проверил, получаю ли я данные, переданные в представление, и делаю: данные переданы для просмотра

Мое модальное окно showMember выглядит так:

<div class="modal" id="show">
  <div class="modal-background" onclick="refs.show.close()"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">{{ $member->name }}</p>
      <button class="delete" onclick="refs.show.close()" aria-label="close"></button>
    </header>
      <section class="modal-card-body">

        <!-- Content -->
        <li class="panel-block">
          <label class="column is-2"><b>E-mail</b></label>{{ $member->email }}
        </li>

        <li class="panel-block">
          <label class="column is-2"><b>T-shirt</b></label>{{ $member->size }}
        </li>

        <li class="panel-block">
          <label class="column is-2"><b>Points</b></label>{{ $member->points }}
        </li>
        <!-- Content -->

      </section>
      <footer class="modal-card-foot">
        <button class="button is-outline" onclick="refs.show.close()">Luk</button>
      </footer>

  </div>
</div>

Возможно, мне не хватает какой-то ссылки на идентификатор или что-то еще, чтобы передать конкретные данные в модальное окно, или проблема в том, что функция javascript не получает переданные данные, кроме последних?

заранее спасибо

1
0
68
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Согласно документации Boostrap 4.1, вам необходимо передать переменные после щелчка.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

А потом в js:

   $('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') 
// Extract info from data-* attributes

  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Источником данных являются атрибуты data- *, вам больше ничего не нужно, чтобы закрыть модальное окно.

Большое спасибо за ответ! Я использую структуру Bulma css, которая не включает в себя готовый javascript, а также встроенные команды переключения данных или таргетинг. Возможно, мне стоит вместо этого подумать о переходе на бутстрап.

ThomasDamsgaard 10.08.2018 18:49
Ответ принят как подходящий

Не могу точно сказать для laravel, однако в (Yii2, Symfony) возвращаемое представление выполняется и вроде как умерло. Вы можете изменять содержимое вашего модального окна динамически только с помощью javascript, который будет загружать данные с помощью AJAX или получать данные из скрытого элемента и загружать их в модальное окно.

Покажите, пожалуйста, свои refs.show.open ().

Обновление от 13 августа 2018 г.

Таким образом, вы можете сделать что-то подобное, прежде чем показывать модальный.

document.getElementById('modal-email').innerText = this.getElementsByClassName('member-email').item(0).innerText;
document.getElementById('modal-size').innerText = this.getElementsByClassName('member-size').item(0).innerText;
document.getElementById('modal-points').innerText = this.getElementsByClassName('member-points').item(0).innerText;

Спасибо, что нашли время ответить. Мои открытые функции - это простой селектор, добавляющий активный класс в модальное окно для его отображения: var refs = {add: {open: function () {document.getElementById ('add'). ClassList.add ('is- активный '); }, закрыть: function () {document.getElementById ('добавить'). classList.remove ('is-active') ‌; }}, показать: {open: function () {document.getElementById ('показать'). classList.add ('is-active'); }, закрыть: function () {document.getElementById ('показать'). classList.remove ('is-active'‌); }}};

ThomasDamsgaard 10.08.2018 18:42

Другие вопросы по теме