We have a users table that has an edit modal, I have to get the data from the table list of a specific user to the modal, then use Laravel logic to output that data in the modals input fields to be edited and later submitted as a form back to the controller.
Table list
<div id='recipients' >
<table id="users" style="width:100%; padding-top: 1em; padding-bottom: 1em;">
<thead>
<tr>
<th data-orderable="false">Username </th>
<th data-orderable="false">Email</th>
<th data-orderable="false">Role </th>
<th data-orderable="false">Active</th>
<th data-orderable="false"></th>
</tr>
</thead>
<tbody>
@foreach ($users as $user)
<tr>
<input type="hidden" id="way-id" value="{{ $user->id }}"/>
<td id="editable">{{ $user->name }}</td>
<td id="editable">{{ $user->email }}</td>
<td id="editable">
@foreach ($user->getRoleNames() as $roleNames)
{{ $roleNames }}
@endforeach
</td>
<td id="editable">
<label >
<input type="checkbox" id="active-user" />
<div ></div>
</label>
</td>
<td>
<button type="button" id="{{$user->id}}"><img
src="/../../img/grey-edit.svg" alt="edit"
onclick="(function(){var listInput = document.getElementById('way-id').value;
document.getElementById('testInout').value = listInput;
})();toggleModal('modal-edit-user'); "></button>
</td>
</tr>
@endforeach
</tbody>
</table>
<div >
<button type="button"
>
<img src="../../img/Icon-white-search.png" alt="search icon">
<a onclick="toggleModal('modal-user-types')">User Types</a>
</button>
<button type="button"
>
<img src="../../img/Icon-plus-white.png" alt="plus icon">
<a onclick="toggleModal('modal-new-user')">New User</a>
</button>
</div>
</div>
Edit User modal
<div
id="modal-edit-user">
<div >
<div >
<div
>
<h3 >Edit User</h3>
<button
onclick="toggleModal('modal-edit-user')">
<span >
<img href="" src="/../../img/black-close-icon.svg"
alt="close icon">
</span>
</button>
</div>
<div >
<!-- Edit user form -->
<form method="POST" action="" id="edit-user-way">
@csrf
@php
$indiUser = '';
@endphp
<input type="hidden" id="testInout" value="" />
<div >
<div >
<div >
<div >
<div >
<label for=""
>Username</label>
</div>
<div >
<input
name="" value="{{ $user->name }}" id="" type="text" />
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<label for=""
>Forename</label>
</div>
<div >
<input
name="" value="" id="" type="text" />
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<label for=""
>Surname</label>
</div>
<div >
<input
name="" value="" id="" type="text" />
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<label for=""
>Role</label>
</div>
<div >
<select
name="" id="">
<option value="0" disabled selected>Select</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
</select>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<label for=""
>Activate/Deactivate
Account</label>
</div>
<div >
<label >
<input type="checkbox" id="active-user" />
<div ></div>
</label>
</div>
</div>
</div>
</div>
</div>
<div >
<button type="submit"
>
<img src="../../img/Icon-orange-save.svg"
alt="Save icon">Save Changes
</button>
</div>
<div >
<button type="button"
>
<img src="../../img/Icon-gray-close.png"
alt="close icon">
<a
onclick="toggleModal('modal-example-small-4')">Delete Users</a>
</button>
</div>
<div>
</form>
</div>
</div>
</div>
<!--footer-->
<div >
<button
type="button" onclick="toggleModal('modal-edit-users')">
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
The calling modal
<script type="text/javascript">
//
function toggleModal(modalID) {
document.getElementById(modalID).classList.toggle("hidden");
document.getElementById(modalID "-backdrop").classList.toggle("hidden");
document.getElementById(modalID).classList.toggle("flex");
document.getElementById(modalID "-backdrop").classList.toggle("flex");
}
</script>
I've tried sending the id to the modal form with inline javascript fired on the button, but the id doesn't update on each button click, plus once there I can't get back into Laravel variables or logic to start displaying query data again
CodePudding user response：
You can try generating dedicated modal for all users, with the id, and then you open the modal which belongs to that user.
For example creating all the modals:
@foreach($users as $user)
<div tabindex="-1" role="dialog" id="modal-{{$user->id}}">
<div role="document">
<div >
<div >
<h5 >Modal title</h5>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div >
<p>Modal body text goes here.</p>
</div>
<div >
<button type="button" >Save changes</button>
<button type="button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@endforeach
And opening the right one in the table
<a onclick="$('#modal-{{$user->id}}').modal('show')">Edit User</a>