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

user_13016994 0
Viewed 1134

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

enter image description here

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.

laravel-blade laravel jquery
1 Answers

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">
<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="#" 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="#" 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>

user_106064000
Related