Laravel 8 updating Data using modal - modal-dialog

Question

recently m learning how to update data by using modal.i can successfully inserted data by modal but can not update before that when i press on edit button my modal pops up without fetched data.
here is my blade file with script-
<div>
<h5 style="text-align: center">Modal Practice</h5>
</div>
{{-- ................................... --}}
<div class="container">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Add data
</button>
{{-- #dd($alldata) --}}
<table id="myTable" class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Common Name</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
#foreach ($alldata as $key => $data)
<tr>
<th scope="row">{{ $key + 1 }}</th>
<td>{{ $data->first_name }}</td>
<td>{{ $data->last_name }}</td>
<td>{{ $data->common_name }}</td>
<td>
<a href="#" class="btn btn-warning btn-sm edit" data-bs-toggle="modal"
data-bs-target="#editModal">Edit</a>
Delete
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<!-- Add Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form action="{{ route('savedata') }}" method="POST" class="row g-3">
<div class="modal-body">
#if (session()->has('success'))
<div class="alert alert-success">
{{ session()->get('success') }}
</div>
#endif
#csrf
<div class="col-md-6">
<label for="inputEmail4" class="form-label">First Name</label>
<input type="text" class="form-control" name="first_name">
</div>
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Last Name</label>
<input type="text" class="form-control" name="last_name">
</div>
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Common Name</label>
<input type="text" class="form-control" name="common_name">
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</form>
</div>
</div>
</div>
{{-- end Add modal --}}
<!-- Edit Modal -->
<div class="modal fade" id="editModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form action="#" method="POST" id="editForm" class="row g-3">
<div class="modal-body">
#csrf
#method('put')
<div class="col-md-6">
<label for="inputEmail4" class="form-label">First Name</label>
<input type="text" class="form-control" id="fname" name="first_name">
</div>
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lname" name="last_name">
</div>
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Common Name</label>
<input type="text" class="form-control" id="cname" name="common_name">
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Update</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
{{-- End Edit Modal --}}
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#myTable').DataTable();
table.on('click', '.edit', function() {
$tr = $(this).closest('tr');
if ($($tr).hasClass('child')) {
$tr = $tr.prev('.parent');
}
var data = table.row($tr).data();
console.log(data);
$('#first_name').val(data[1]);
$('#last_name').val(data[2]);
$('#common_name').val(data[3]);
$('#editForm').attr('action', '/savedata' + data[0]);
$('#editModal').modal('show');
});
});
</script>
here is controller-
public function update(Request $request,$id)
{
$alldata = DataSave::find($id);
$alldata->update([
'first_name'=>$request->first_name,
'last_name'=>$request->last_name,
'common_name'=>$request->common_name
]);
return redirect()->route('index')->with('success', 'Update Successful');;
}
}
and here is my route-
Route::get('/index',[SaveController::class,'index'])->name('index');
Route::post('/save',[SaveController::class,'savedata'])->name('savedata');

Answer 1

to get a modal pop-up with fetched data i use something like (look id=""):
<!-- Add Modal -->
<div class="modal fade" id="editModal{{ $id }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
</div>
And button link to modal should be like (look data-target=""):
<td>
<a href="#" class="btn btn-warning btn-sm edit" data-toggle="modal"
data-target="#editModal{{ $id }}">Edit</a>
Delete
</td>