How to pass data to edit modal from @foreach blade in Laravel 8

I want to have an edit modal in same page. I have a list of record.

here is code snippet from partners.blade.php view.

@foreach($partners as $partner)
  <td>
    <a href="#" onclick="edit_partner()"
      data-target="#edit_partner"
      data-toggle="modal"
      data-id="{{$partner->id}}"
      data-full_name="{{$partner->full_name}}"
      data-code="{{$partner->code}}" ...
      >{{$partner->full_name}}</a>
    </td>

and modal which I want to edit partner from:

<div id="edit_partner" class="modal fade">... </div>

Here is jquery code:

function edit_partner() {
    $('#edit_partner').on('show', function(e) {
        var link = e.target(),
            modal = $(this),
            full_name = link.data('full_name'),
            code = link.data('code'), ...

        modal.find('#full_name').val(full_name);
        modal.find('#code').val(code); ...
    });
}

I want this:
when I click full name of partner, it should open a modal which contains partner information and I can edit this information.

Here is what I tried:

1. I used this code, but it always return the last partner.

2. I tried this:

<div id="edit_partner_{{$partner->id}}" class="modal fade">... </div>

and

 data-target="#edit_partner_{{$partner->id}}"

but this time, when I click on full name it does not open the modal. when I click the last partner, it open the modal with partner information.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can pass this inside your edit_partner function then use same to get data attribute value and pass same to your modal inputs.

Demo Code :

function edit_partner(el) {
  var link = $(el) //refer `a` tag which is clicked
  var modal = $("#edit_partner") //your modal
  var full_name = link.data('full_name')
  var code = link.data('code')
  modal.find('#full_name').val(full_name);
  modal.find('#code').val(code);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="nofollow noreferrer noopener">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<table>
  <tr>
    <td>
      <!-- pass this inside function-->
      <a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" onclick="edit_partner(this)" data-target="#edit_partner" data-toggle="modal" data-id="{{$partner->id}}" data-full_name="abc" data-code="1">abc</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" onclick="edit_partner(this)" data-target="#edit_partner" data-toggle="modal" data-id="{{$partner->id}}" data-full_name="abc2" data-code="2">abc2</a>
    </td>
  </tr>
</table>

<div class="modal fade" id="edit_partner" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
        <input type="text" id="full_name">
        <input type="text" id="code">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0