Clicking on table row returning the incorrect data

Question

Thanks for taking your time looking at my problem.

I have a view returning data from my database passing it through the controller:

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

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

I'm happy with the view: enter image description here

I'm passing it to the view with a foreach loop:

 @foreach ($members as $member)

 @include('partials.tableRow')

 @endforeach

My tableRow looks like this:

<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>

The problem comes when i click on the individual table row. I want it to display the data connected to the information at the individual table row. On the picture below I've clicked the first row (my own name) and up comes this: wrong data display

As you may see it's showing the info from the last row and does it every time i click a row. Same problem when I go further down the pagination.

I've checked to see if I get the data passed to the view and i do: data passed to view

My showMember modal looks like this:

<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>

I might be missing some link to an id or something in order to pass the specific data to the modal or is the problem with the javascript function not getting the passed data besides the last?

Thank you in advance

Answer 1

Acoording with the Boostrap 4.1 documentation, you need to pass the variables after click.

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

And then in you 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)
})

The data source is data-* attributes, you dont need anything else to close the modal.

Answer 2

Cannot tell exactly for laravel, however in (Yii2, Symfony) returned view is executed and kind of died. You can change content of your modal dynamically only with javascript, which will load data by AJAX or get from hidden element and load to the modal.

Show your refs.show.open(), please.

Update from 13 Aug 2018

So you can do something like this before showing modal.

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;