display data from table with ajax laravel 8 - ajax

Question

I want to show the data of table in a form for updating it.
So I'm using this code :
#foreach($castings as $cast)
<div class="card d-flex flex-row mb-3">
<a class="d-flex" href="Pages.Product.Detail.html">
<img src="img/products/fat-rascal-thumb.jpg" alt="Fat Rascal"
class="list-thumbnail responsive border-0 card-img-left"/>
</a>
<div class="pl-2 d-flex flex-grow-1 min-width-zero">
<div
class="card-body align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero align-items-lg-center">
<a href="Pages.Product.Detail.html" class="w-40 w-sm-100">
<p class="list-item-heading mb-0 truncate">{{ $cast->casting_name }}</p>
</a>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_cin }}</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_email }}</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_phone }}</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_gender }}</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_address }}</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_city }}</p>
<div class="w-15 w-sm-100">
<span class="badge badge-pill badge-primary">PROCESSED</span>
</div>
</div>
<label class="custom-control custom-checkbox mb-1 align-self-center pr-4">
</label>
</div>
</div>
#endforeach
<div class="modal fade" id="castingmodeledit" tabindex="-1" role="dialog" aria-hidden="true">
<form method="post" class="needs-validation tooltip-label-right" id="formcastedit" novalidate
enctype="multipart/form-data">
{{ csrf_field() }}
{{ method_field('PUT') }}
<div class="modal-body">
<input type="hidden" id="id_hidden" name="id"/>
<div class="form-group position-relative error-l-50">
<label>Name</label>
<input type="text" class="form-control" name="casting_name" id="casting_name">
<div class="invalid-tooltip">Name is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>CIN</label>
<input type="text" class="form-control" name="casting_cin" id="casting_cin" required>
<div class="invalid-tooltip">CIN is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>EMAIL</label>
<input type="text" class="form-control" rows="2" name="casting_email" id="casting_email" required>
<div class="invalid-tooltip">EMAIL is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>PHONE</label>
<input type="number" class="form-control" rows="2" name="casting_phone" id="casting_phone" required>
<div class="invalid-tooltip">PHONE is required!</div>
</div>
<div class="form-group position-relative">
<label>Radio</label>
<div>
<div class="custom-control custom-radio">
<input type="radio" id="jQueryCustomRadio1" name="casting_gender" id="casting_gender"
class="custom-control-input" required value="homme">
<label class="custom-control-label" for="jQueryCustomRadio1">Homme</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="jQueryCustomRadio2" name="casting_gender" id="casting_gender"
class="custom-control-input" required value="femme">
<label class="custom-control-label" for="jQueryCustomRadio2">Femme</label>
</div>
</div>
</div>
<div class="form-group position-relative error-l-50">
<label>ADDRESS</label>
<input type="text" class="form-control" rows="2" name="casting_address" id="casting_address" required>
<div class="invalid-tooltip">ADDRESS is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>CITY</label>
<input type="text" class="form-control" rows="2" name="casting_city" id="casting_city" required>
<div class="invalid-tooltip">CITY is required!</div>
</div>
<button type="submit" id="createBtn" class="btn btn-primary">Update</button>
<div class="result"></div>
</div>
</form>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.editbtn').on('click', function (e) {
$('#castingmodeledit').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function () {
return $(this).text();
}).get();
console.log(data);
$('#casting_name').val(data[1]);
$('#casting_cin').val(data[2]);
$('#casting_email').val(data[3]);
$('#casting_phone').val(data[4]);
$('#casting_gender').val(data[5]);
$('#casting_address').val(data[6]);
$('#casting_city').val(data[7]);
});
});
</script>
But it does not display anything in the modal form
since I don't have the <td> and <tr> in my form I didn't know how to use them later in the ajax script
I tried to add the tr and td balise in my form but the same problem
please if you have any idea help me
Edit
I tried that
<script type="text/javascript">
$(document).ready(function(){
$('.editbtn').on('click', function(e) {
$('#castingmodeledit').modal('show');
var selector = $(this).closest('.card-body'); //get closest card div
//use .find to get values and set inside inputss
$('#casting_name').val(selector.find(".casting_name").text());
$('#casting_cin').val(selector.find(".casting_cin").text());
$('#casting_phone').val(selector.find(".casting_phone").text());
});
</scipt>
But doesn't work
Edit2
<div class="card-body align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero align-items-lg-center">
<a href="Pages.Product.Detail.html" class="w-40 w-sm-100">
<p class="list-item-heading mb-0 truncate">{{ $cast->casting_name }}</p>
</a>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_cin }}</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100">{{ $cast->casting_phone }}</p>
</div>

Answer 1

You can give classes to your p tags inside your card .Then , whenever user click on edit simply use .closest and .find() to get values from p tags and show them inside modal inputs .
Demo Code :
$('.editbtn').on('click', function(e) {
var selector = $(this).closest('.card'); //get closest card div
//use .find to get values and set inside inputss
$('#casting_name').val(selector.find(".name").text());
$('#casting_cin').val(selector.find(".cin").text());
$('#casting_email').val(selector.find(".email").text());
$('#casting_phone').val(selector.find(".phone").text());
$('#castingmodeledit input[value=' + selector.find(".gender").text().trim() + ']').prop('checked', true);
$('#casting_address').val(selector.find(".address").text());
$('#casting_city').val(selector.find(".city").text());
$('#castingmodeledit').modal('show');
});
.invalid-tooltip {
display: none
}
<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>
<div class="card d-flex flex-row mb-3">
<a class="d-flex" href="Pages.Product.Detail.html">
<img src="img/products/fat-rascal-thumb.jpg" alt="Fat Rascal" class="list-thumbnail responsive border-0 card-img-left" />
</a>
<div class="pl-2 d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero align-items-lg-center">
<!--added classes-->
<a href="Pages.Product.Detail.html" class="w-40 w-sm-100">
<p class="list-item-heading mb-0 truncate name">abcw22</p>
</a>
<p class="mb-0 text-muted text-small w-15 w-sm-100 cin">2</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 email">a#gmaile.com</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 phone">13456</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 gender">homme</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 address">abwwc xyz..</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 city">Mum</p>
<div class="w-15 w-sm-100">
<span class="badge badge-pill badge-primary">PROCESSED</span>
</div>
</div>
<label class="custom-control custom-checkbox mb-1 align-self-center pr-4">
<a href="#" class="glyph-icon iconsminds-folder-edit editbtn" >Edit</a>
</label>
</div>
</div>
<div class="card d-flex flex-row mb-3">
<a class="d-flex" href="Pages.Product.Detail.html">
<img src="img/products/fat-rascal-thumb.jpg" alt="Fat Rascal" class="list-thumbnail responsive border-0 card-img-left" />
</a>
<div class="pl-2 d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero align-items-lg-center">
<a href="Pages.Product.Detail.html" class="w-40 w-sm-100">
<p class="list-item-heading mb-0 truncate name">abcw</p>
</a>
<p class="mb-0 text-muted text-small w-15 w-sm-100 cin">1</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 email">a#gmail.com</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 phone">134536</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 gender">homme</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 address">abwwc xyz..</p>
<p class="mb-0 text-muted text-small w-15 w-sm-100 city">Mum</p>
<div class="w-15 w-sm-100">
<span class="badge badge-pill badge-primary">PROCESSED</span>
</div>
</div>
<label class="custom-control custom-checkbox mb-1 align-self-center pr-4">
<a href="#" class="glyph-icon iconsminds-folder-edit editbtn" >Edit</a>
</label>
</div>
</div>
<div class="modal fade" id="castingmodeledit" tabindex="-1" role="dialog" aria-hidden="true">
<button type="button" class="close" data-dismiss="modal">×</button>
<form method="post" class="needs-validation tooltip-label-right" id="formcastedit" novalidate enctype="multipart/form-data">
{{ csrf_field() }} {{ method_field('PUT') }}
<div class="modal-body">
<input type="hidden" id="id_hidden" name="id" />
<div class="form-group position-relative error-l-50">
<label>Name</label>
<input type="text" class="form-control" name="casting_name" id="casting_name">
<div class="invalid-tooltip">Name is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>CIN</label>
<input type="text" class="form-control" name="casting_cin" id="casting_cin" required>
<div class="invalid-tooltip">CIN is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>EMAIL</label>
<input type="text" class="form-control" rows="2" name="casting_email" id="casting_email" required>
<div class="invalid-tooltip">EMAIL is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>PHONE</label>
<input type="number" class="form-control" rows="2" name="casting_phone" id="casting_phone" required>
<div class="invalid-tooltip">PHONE is required!</div>
</div>
<div class="form-group position-relative">
<label>Radio</label>
<div>
<div class="custom-control custom-radio">
<input type="radio" id="jQueryCustomRadio1" name="casting_gender" id="casting_gender" class="custom-control-input" required value="homme">
<label class="custom-control-label" for="jQueryCustomRadio1">Homme</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="jQueryCustomRadio2" name="casting_gender" id="casting_gender" class="custom-control-input" required value="femme">
<label class="custom-control-label" for="jQueryCustomRadio2">Femme</label>
</div>
</div>
</div>
<div class="form-group position-relative error-l-50">
<label>ADDRESS</label>
<input type="text" class="form-control" rows="2" name="casting_address" id="casting_address" required>
<div class="invalid-tooltip">ADDRESS is required!</div>
</div>
<div class="form-group position-relative error-l-50">
<label>CITY</label>
<input type="text" class="form-control" rows="2" name="casting_city" id="casting_city" required>
<div class="invalid-tooltip">CITY is required!</div>
</div>
<button type="submit" id="createBtn" class="btn btn-primary">Update</button>
<div class="result"></div>
</div>
</form>
</div>